John Glabb John Glabb - 1 month ago 18
CSS Question

How to override css class set in iframe?

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?

Answer

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.