Home > Software engineering >  Hide, remove or change color of specific class inside external iframe
Hide, remove or change color of specific class inside external iframe

Time:09-18

I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!

CodePudding user response:

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

CodePudding user response:

Try this:

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

CodePudding user response:

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.

CodePudding user response:

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" >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!

  • Related