2

I have to style something within an iframe.

<html>
 <head>
   <link href="url/to/my/custom.css"></link>
 </head>
 <body>
    ......
    <iframe class="webform-frame">...</iframe>
 </body>
</html>

In my custom.css I already tried to use .webform-frame h5 { color: #f00; } but it doesn't work.

The iframe is generated by some JavaScript (I have no access to it).

Any idea how I could style that stuff within that iframe?

Mr. Alien
  • 140,764
  • 31
  • 277
  • 265
Safari
  • 3,016
  • 7
  • 41
  • 59
  • 1
    The document inside the `iframe` is a separate document; you'll need to add your style sheet there. Either in the HTML, or dynamically using JavaScript (but for that the iframe's document needs to be on the same domain. Is it?) – Pekka Jun 26 '13 at 09:43
  • no its on a different domain – Safari Jun 26 '13 at 09:46
  • Usually what companies do (I'm sure you will have seen it) is enclose the iFrame in your own wrapping document. Companies do this when they require you to make a payment. They have their company logo and style in your document, and the payment form is in a separate iFrame within this. No, you can't style the stuff in that iFrame, but you can style your own code around it. Perhaps think more toward this standard solution employed by many enterprise companies. – Jimbo Jun 26 '13 at 09:50
  • Possible duplicate of [How to apply CSS to iframe?](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – T.Todua Oct 17 '16 at 08:02

3 Answers3

8

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

Mr. Alien
  • 140,764
  • 31
  • 277
  • 265
  • My solution is perfectly valid for some special purposes (e.g. Chrome extension development) and I think it shouldn't be ignored if the use case allows it. – Sebastian vom Meer Jun 26 '13 at 11:11
  • to work around CORS you may be able to add a – chad Feb 20 '14 at 20:28
6

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.

Sebastian vom Meer
  • 4,629
  • 2
  • 24
  • 35
-1

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

$('iframe.webform-frame').contents().find('h5').css("color","#f00");
Vamsikrishna
  • 146
  • 2
  • 13