如何更改iframe中的正文CSS元素？

Question

I set the default body background of site to: body {background-color: red;}

However, I am using external text input box that is displayed via an iframe and its also showing a red background.

How can I keep the red background for the site but change the background inside the iframe to white?

I tried doing something like, but it had no affect:

iframe body {background-color: white !important;}
document body {background-color: white !important;}
td body {background-color: white !important;}
tr body {background-color: white !important;}

Here is a screenshot of where the body is used: http://screencast.com/t/D2x5dFRCE

Thanks!

Answer 1

Maybe it's not possible.

If you are the owner of domain in the iframe, you can allow scross site scripting by a .htaccess.

If you are create a project like "editor", you can use this to edit iframe elements format:

$("#iframName").contents().find(element)

Answer 2

Have you tried to force it using jquery?

$("#iFrame").contents().find("#someDiv").css({width:'450px'});
$("#iFrame").contents().find("body").css({color:'red'});