How can I style dynamically created elements within an iframe?


Tags: javascript,html,css,iframe

Problem :

I have a google review widget (http://www.netrite.net/sem-tools/google-reviews-widget/) that spits out this code so I can put it on our website:

<script language='javascript1.1'>
var nr_placeid = 'ChIJYVDB7c00K4gRmPHHGRTz7-k';
var nr_width = 900;
var nr_height = 305;
var nr_directreviewbox = 0;
</script>
<script language='javascript1.1' src='http://www.netrite.net/google-review-    code/googlereviews.js'></script>

I want to be able to style the dynamically generated elements that are created. When I try to target the classes it doesn't work. I've also tried putting a div around this script and adding a class to that, but that doesn't work either.

I'm pretty novice with code, but does anyone know how and if it's possible to style these elements using css? I can't seem to hook onto anything.

The only thing I can do it

iframe {
  margin-left: 20px;
 }

but even this is not great b/c if we ever use another iframe it will capture both of them.

Does anyone have any ideas? Please explain simply b/c I'm not very experienced yet haha.

thank you so much!



Solution :

You can't style the contents of the iframe if the page does not have same domain as your parent. This is to prevent XSS.


    CSS Howto..

    How to change the background color(on hover) and css(height/width) of a select option?

    Hide/Show menu with increase/decrease of width

    How to overwrite an !important CSS property in jQuery

    How to add text to different parts of chart made from css, html, and javascript?

    ASP.Net MVC: How to use razor variable in CSS file

    how to strech select?

    How can I create an inline grouped listview in windows 8

    How to comment in-line CSS?

    How to display .entry-content CSS on Wordpress home page?

    Navbar doesn't scroll to show links on smaller devices when using nicescroll plug-in

    How can I use d3.js filter to assign different css classes to elements?

    How to fire a new css animation when the element already has one?

    How to style text in JQuery?

    How to include css files into compojure project?

    How to make equal space between boxes in one row via CSS

    How can I make a similar shape to a parallelogram in css?

    How does CSS computation for background percentages work?

    How can I use a `comment` fa-icon and a text div to display the number of messages a user has?

    how to save the datas which are get from a newsletter? [closed]

    using css modules in react how can I pass a className as a prop to a component

    How to style responsive table to make table like list?

    small space keeps showing to right side of my website w

    How to Align all inputs in a Form

    HTML divs, how to wrap content?

    HTML emails in 2013: How to control spacing between elements like paragraphs and images?

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    How to change property of a specific CSS pseudo element?

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    simple css issue - how to change anchor inside li if li:hover

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?