How to apply css to iframe content? [closed]

Question

I am unable to get CSS generated content to work for iframe elements:

iframe::after {content: 'example';}
iframe::before {content: 'example';}

Does anyone have a solution that actually 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.