How to override css class set in iframe? [duplicate]


Tags: html,css,iframe

Problem :

This question already has an answer here:

I have third party iframe widget component on my page. This is all I have as an HTML string in the body of my page. This iframe brings some custom button with style set by that widget.jsp. Chrome inspector doesn't show anything else except <iframe> component. But FireFox shows that button inside <iframe> with style class ".button"

<iframe src='https://www.xxxxxxxx.com/aaa/bbb/widget.jsp?par1='TEST%20BUTTON'></iframe>

enter image description here

So how do I override that .button style class?



Solution :

Browser security does not allow to manipulate third party iframe content via JavaScript. Adding a CSS from outside is also not possible.

The only way to change the style would be from within widget.jsp. Maybe whoever provides you that can also provide a URL parameter, which would allow you to change its appearance.


    CSS Howto..

    How can I use a CSS selector to match two classes being present?

    How to make a smoother animation with jQuery UI slide effect

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How to create rounded edge panel in ExtJS 2.1

    How do I size an image to fit inside another image? [closed]

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to use weather API to create my weather HTML page [closed]

    How should I convert this object from .PSD to HTML/CSS?

    how to use 'selector gadget' to scrape data into R?

    Show icon font on image center on mouse hover

    How to avoid the div 'move' when mouse hover?

    jquery - how to queue up a series of css property changes

    How slow is * css selector for mobile browsers?

    How can I align text using CSS but perform like printf in C? [closed]

    How to disable the collapsing feature in twitter bootstrap 3?

    Simple CSS: How to fix display:inline issue

    How to push image (behind canvas) to front in order for its onclick function to work

    How to serve different css files to different ajax pages?

    How do I set the table cell widths to minimum except last column?

    How to size a div box in CSS so text is centered regardless of length

    c3.js - how to show hand cursor on bar chart hover

    CakePHP call really old css file. How to refresh

    How to extract class names from a CSS selector?

    How to make cross-browser compatibility with IE10 and IE11?

    Awkward gap between menu items. How to fix?

    How to set animation in css?

    How to extend the length of a page through CSS?

    table image in cell shown smaller [closed]

    Django 1.7: how to send emails by using an html/css file as template