style content within an iframe

Question

I have to style something within an iframe.

Answer 1

Using jquery you can access the contents inside iframe using the following syntax:

$('iframe.webform-frame').contents().find('h5').css("color","#f00");

Answer 2

There is a new HTML 5 feature called seamless iframe, which perhaps does what you want:

[...] it indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document [...]

<iframe src="iframe.html" seamless></iframe>

However, for now it has very poor browser support (Webkit only I think). So it's not a good solution for most use cases today. But perhaps it is for you or some readers of the future.

Update: Browser support seems to be even worse today, so this isn't a solution today or in the near future.

Answer 3

If you want to target the iframe i.e the border, border color, padding, or margin, then using this will target your iframe:

iframe.webform-frame {
   /* Styles */
}

If you are trying to target the markup which is loaded inside the iframe than that's not possible.

Note: You can control a few things like making the frame background transparent etc...

---

Edit: Would like to add seamless attribute explanation here, as Sebastian told, but the support is poor, you should perhaps ignore doing so.. Also do not edit any iframed pages without prior permission of the page owner