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.

Massenet

You need to say why the other threads (like https://mcmap.net/q/45515/-how-to-apply-css-to-iframe ) are not good enough for you. Otherwise people will end up posting the same answers. For example, did you even try the other suggestions? – Prodigy

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/

Strahan

Only works if the iFrame is form the same parent domain. – Hedy

Adding style in the header is another option https://mcmap.net/q/67364/-override-body-style-for-content-in-an-iframe – Eleusis

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.

Inflammable