Is there a way to style the contents of a iframe using CSS?

Question

<iframe src="#link">
#document
<!doctype html>
  <html>
     ...
  </html>
</iframe>

How would I apply my own CSS styling to any the elements inside the #document Can I do this only using CSS, not using Jquery.

Possible duplicate of [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) — Germano Plebani, Oct 28 '19 at 17:09

score 2 · Accepted Answer · answered Oct 28 '19 at 17:20

2

There is no way to do what you're looking for with CSS only. You can style elements inside an iframe using JavaScript but as long as the iframe is on the same domain as your site. I must add that doing this with JS is a real pain in the butt though.

If the iframe comes from a different domain, all bets are off. This is done in order to protect sites from being hijacked (imagine I make a site with a full-screen iframe of Youtube and then lure people into giving me their password, sort of thing).

answered Oct 28 '19 at 17:20

Obed Parlapiano

3,226
3
21
39

*If the iframe comes from a different domain, all bets are off* - not 100% true, as [CORS can be implemented for trusted system](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – freefaller Oct 29 '19 at 11:51
True! I made the assumption that you wouldn't have control of the other domain. But if you do, you're better off changing css on that side rather than messing with CORS – Obed Parlapiano Oct 29 '19 at 13:00

score 0 · Answer 2 · answered Oct 28 '19 at 17:15

0

Both documents exist in the equivalent of two different browser tabs. CSS alone cannot style the contents of an iframe, but can of course style the iframe itself. Even using JavaScript (jQuery) won't work all the time.

answered Oct 28 '19 at 17:15

AlgoRythm

1,196
10
31

Thank you for answering my question. – Raynier Leroux Oct 28 '19 at 17:46

Is there a way to style the contents of a iframe using CSS?

2 Answers2