How to apply css to iframe content? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

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.

---

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/

---

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.