I have an iframe on my html page that displays text output from a file. I am using an iframe to display a the text in a box.

The text from the text file is actually there, but it can't be seen. The problem is that I need the text to match the color scheme of the page. the background is black and the text is else where on the page is light blue.

However, the text in the iframe is showing up as regular black text. I have tried different html code to change the font color but nothing works.

Here is my code:

<div >
    <p><iframe style="color:blue" src="/home/ironmantis7x/Documents/BSSLLC/node_electron/jasminWeb_v2/engine/py-chatbotAI/test.txt" frameborder="2" height="300" width="50%"></iframe></p>
</div>

What is the correct way to make the text visible in the iframe? Is there a better way to do it other than using an iframe?

CodePudding user response：

The iframe loads another page in your page. You cannot style it from the page containing the iframe tag, it has to be styled in the page the iframe points to.

It could actually be done if both are on the same origin by accessing the iframe document from JavaScript. But it would be tricky and not a good way to do this.

CodePudding user response：

You can open inspect element and see the class name or tag name which you want to change, then in your css overwrite it