Override CSS in an iframe

Question

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?

Answer 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.

Answer 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';
})