Question

I have an HTML page with several iframes, each pointing to a text file on the same domain.

Now I have read up quite a bit on when the iframe points to an HTML file, but did not find anything on when it is a text file. And I can obviously not add styling inside the textfiles themselves.

The behavior is that the text content of the iframe inherits the background-color of the parent, but not the color.

Now, when I do the below in the parent HTML doc, the background-color of the content of the iframe is affected.

iframe
{
    background-color: black
}

But again, if I do the below, the text color of the iframe text content remains unaffected.

iframe
{
    color: White;
}

Why?

Answer 1

If there’s no background-color specified in the document loaded into the iframe, it’ll assume transparent so what you actually see is the background-color of the iframe because CSS applies to the iframe itself, not it’s content.

So, basically editing the text color you should use another method, this thread has a couple of methods:

How to apply CSS to iframe?

There is no official method to modify an iframe’s content so you’re stuck with dirty hacks.