Change external iframe color or put opacity in iframe

I believe you edit the CSS of the contents of <iframe> , since it is external. Already to manipulate the opacity of the element, use this:

iframe {
   opacity: .3;
}
iframe:hover {
   opacity: 1;
}

With this the <iframe> will have a transparency and when the mouse positions on it, it will be totally visible.

CSS SOURCE

iframe {
/* Required for IE 5, 6, 7 */
zoom: 1;

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

If you're asking this, it's because you do not control the external iFrame, right? Otherwise it would be trivial to solve your problem.

This only works if the iframe loads from the same domain as the parent page. You will not get via CSS, but via javascript it works. You can use any framework, such as jQuery or bootstrap , to make your task easier as well. The parent page is accessible from the iframe via the parent object.

For example:

parent.$("#ID").css("border","1px solid red");

(Rouched from this answer)

Now, if the parent page and the iframe page are from different domains, you can not. It would be a huge security breach if that were possible.