Styling text document inside iframe with CSS from parent page

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?

Since I couldn't find a workable solution, In the end I had to convert my text docs to html and reference a basic stylesheet in them to set the text color. — Jacques Bosch, Jan 19 '12 at 03:57

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

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.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 18 '12 at 08:04

Tim S.

13,597
7
46
72

Tnx. Yes, I have see that question, but those hacks all assume the content document of the iframe is an html doc, not a text doc. So they don't work with text docs. Or? – Jacques Bosch Jan 18 '12 at 08:27
That won't work with text documents, indeed. If you wish to get contents of a text file and use styling, I recommend you to use an AJAX request instead. It'll return the content in plain text and you can put the text somewhere using javascript and it'll use your default styling. – Tim S. Jan 19 '12 at 08:39
Yeah, thought of that too. Decided to just convert my text to html for now. Thank you much. – Jacques Bosch Jan 19 '12 at 12:05

score 0 · Answer 2 · answered Jan 13 '16 at 10:44

In my case I have a custom file browser designed to run stand-alone or in an iframe. When run in an iframe it blends in with the rest of the site. Clicking a TXT file opens it, and the site uses dark backgrounds. Instead of changing the text in the file to match, I simply made the links open in a new tab. This solves the dark text on dark background issue and is better for the end user.

Consider not changing the text color and finding an alternate solution

Styling text document inside iframe with CSS from parent page

2 Answers2