CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Yevgen
Yevgen

Reputation: 797

How to change body css elements inside iframe?

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!

Upvotes: 0

Views: 4035

Answers (2)

Newbie
Newbie

Reputation: 287

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)

Upvotes: 1

Bellash
Bellash

Reputation: 8184

Have you tried to force it using jquery?

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

Upvotes: 0

Related Questions