Override CSS in an iframe

问题

On this page, the form is an iframe provided by JotForm.

I want to left-align the form, and reduce the padding around the LI elements that contain the text fields.

In Magento Go (the website platform hosting the website), I have entered the following code into custom.css:

iframe#40142457787864 form#40142457787864 .form-all {margin: 0 !important;}
iframe#40142457787864 form#40142457787864 .form-line {padding: 4px 0 !important;}

However, this is not being applied by the browser.

Why not?

回答1:

The form is not a descendant of the iframe.

It is an element in a different document, with its own DOM, that is loaded into the iframe.

If you want to style it, you need to edit the stylesheet for the document loaded in the iframe, not the document containing the iframe.

回答2:

This question was marked as duplicate with the comments saying that answer in this page addresses the question, but it doesn't. The OP's problem was to hide some content inside iframe and he is ok with javascript or css approach, so I am just posting my answer here.

Below code will hide content inside iframe,

document.getElementById("frame").addEventListener('load', function(){
    var iframeDocument = document.getElementById("frame").contentWindow.document;
    iframeDocument.getElementById('test').style.display = 'none';
})

来源：https://stackoverflow.com/questions/21185806/override-css-in-an-iframe

标签

css

iframe