How to apply css to iframe content?

Question

There are a few threads on this site discussing this topic, but none of the offered solutions worked for me.

Can anyone please provide a solution that you tried and you know that it works?

Thanks in advance.

Answer 1

You can use jQuery's .content() function to access it.

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

Example

Here's an example showing me applying css to the jQuery logo typically found in the top left of the screen. Mind you, it has to be same domain/ports etc, so that's why my example features jsfiddle in the iframe.
http://jsfiddle.net/pPqGe/

Answer 2

Is the iframe dynamically created, or is it something that is mostly static (light a iframe used for lightbox effect).

If it is static, you can simply use style tags inside the iframe markup, or better yet include an external stylesheet by linking to it in the iframe markup.

If it is dynamic, you are best off using the jQuery JavaScript library as it is exceptionally good for handling CSS.

Answer 3

Thanks guys for your answers, I think the reason I was having a problem was because I was trying to apply CSS to an iframe that was NOT on the same domain as the host page. Apparently this is considered a security risk by most modern browsers and they don't allow it.