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 to give background image in CSS? [closed]

    Show/Hide Div in jQuery, issue with “skipping” divs

    How to get an li to expand to fit thumbnail content?

    How do nested vertical margin collapses work?

    Showing the percentage of poll's progress bar outside progress bar

    how to call browser based css?

    How to vertically center text next to a radio button

    How to make your website works on a projector?

    How to place divs three in a row with css and html

    How do CSS sprites speed up a web site?

    How to vertically align

    tag in navbar

    JavaScript CSS how to add and remove multiple CSS classes to an element

    How to give hover effect to next div using css

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to set border radius of some corner only with CSS

    How do I select a css element with a text not attached to the attribute?

    Color of links not always showing correctly

    How to position ionic button using CSS

    How to remove a specific class on the clicked control?

    How to Rotate Text and have it's Parent Div act Dynamically

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How to add text underneath the centered image

    How can I make my form take only a limited space?

    How to pass css :active pseudo class to javascript?

    How to horizontally align a list of contacts?

    parse JSON to HTML table: How do I format the css of the table?

    How to specify image paths in CSS files?

    CSS - how do I float another div over another without overlapping

    How to make IE support min-width / max-width CSS properties?

    How to make navigation bar of pure css slider?