Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
+8
A:
In short, no. You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe.
mmattax
2009-02-24 21:49:57
+3
A:
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Al W
2009-02-24 21:50:34
+2
A:
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
Diodeus
2009-02-24 21:51:59
see my this question it's similar http://stackoverflow.com/questions/1962707/how-to-give-style-to-iframed-page-content-using-parent-pages-css but can't we change style if frame is from another server?
metal-gear-solid
2009-12-29 13:27:46
That is correct. The Iframe content is subject to the same-domain policy. If it's from your domain, you can control it, if not, you're locked out. This prevents all kinds of Iframe-based page hijacking.
Diodeus
2009-12-29 16:08:43
+3
A:
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Justin Lucente
2009-02-24 21:56:15