如何修改谷歌验证码 iframe 样式 [重复]答案

【问题标题】：How to modify google captcha iframe styles [duplicate]如何修改谷歌验证码 iframe 样式 [重复]
【发布时间】：2017-01-11 06:30:15
【问题描述】：

我有以下页面 HERE，基本上你可以看到有一个 google 验证码，现在我需要 box-shadow 并且边框消失了，所以我应用了以下样式：

.rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}

上述方法不起作用，因为验证码是在 iframe 中加载的，所以在浏览了一段时间后，我想出了以下解决方案：

$('.g-recaptcha iframe').load( function() {
         $('.g-recaptcha iframe').contents().find("head")
          .append($("<style type='text/css'>  .rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}  </style>"));
});

这也不起作用，我认为在这种情况下这样做是错误的，因为 google iframe 已经在 <head> 样式元素中有一些自定义样式，所以上面恐怕可能会覆盖它。

那么我该如何修改谷歌验证码样式呢？？

我想要的只是边框和阴影消失了。

【问题讨论】：

标签： html css iframe

【解决方案1】：

当我在表单底部包含验证码时，我遇到了同样的问题，默认的验证码边框和框阴影看起来确实不正确。我解决了无法使用css或javascript设置recaptcha样式的问题，方法是创建一个绝对定位的div，与recaptcha大小相同，边框与我的背景颜色相匹配。这样，默认的边框和框阴影就对网站的用户隐藏了。但是，这种方法不适用于 IE10 及以下版本。我使用条件注释插入了一个样式表，该样式表在这些浏览器上隐藏了新的 div。

HTML：

<div class="recaptcha"><div class="g-recaptcha"></div></div>
<div class="no-border-recaptcha"></div>

CSS：

.no-border-recaptcha{
  width: 304px //same width as the google recaptcha
  height: 78px //same height as the google recaptcha
  position: absolute;
  right: 0 //I have my recaptcha floated to the bottom right of the form
  pointer-events: none //make it so that you can still select the recaptcha behind the new div
  border: 3px solid #f7f7f7 //matches my background color
}

【讨论】：