Hide, remove or change color of specific class inside external iframe

Viewed 56
4 Answers

External iframe means you have no control on what's inside.

Try this:

div.v1CNvb.sId0Ce, div.I3zNcc.yF4pU {
  display: none;
}

I'm afraid not!

I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.

Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.

But a cross-over

you can use blank rectangles to not let them be shown but it's not really guaranteed.

:root {
  --hiderColor: red;
}

#hider {
  width: 640px;
  height: 55px;
  margin-top: -50px;
  background: var(--hiderColor);
  position: absolute;
  z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>

It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!

By the way, I used the red colour so you know how it works you, can change the colour;

And a note: the widths of the div and iframe must be one and the same

Good luck!

I had that problem for something I made for a class, I used

div.a {
display: none;
}

I haven't tried it, but you should be able to use

<p style="color:black">(Link Here)</p>

To recolor the text. Again, I haven't done much restyling of links, but these should work.

Related