Html 如何隐藏recaptcha v2.0小部件的边框？

我想隐藏recaptcha v2.0小部件的边框，以便更好地将其可视化地集成到网站的外观中

注意：我将此作为一个问题发布，并提供一个解决方案，因为我在主题中发现的大多数StackOverflow问题都围绕着删除recaptcha的iframe的frameborder属性，这在技术上不是我想要的。我追求的是这样的结果——一个无边缘的recaptcha小部件，我可以在更大的视觉环境中定位它

---

我希望这是有帮助的

我想隐藏v2.0ReCaptcha（带有“我不是机器人”复选框的那一个）的边界，并按如下方式解决：

用另一个div包装recaptcha div（标有“g-recaptcha”类的div），并将其大小设置为略小于在处输入的iframe，然后使用position:relative和left:-10px移动iframe，以隐藏边框

如果您使用的是“紧凑型”版本，则需要调整大小。。。我提供的css适用于“普通”版本

注意：仅在Safari 9.1.2（OSX）上进行了测试，但我想这项技术也会应用到其他浏览器上

希望这有帮助

html:

---

注意：适用于谷歌带来但有不同问题的人

如果要仅隐藏边框，而不使其减少边框，保留原始设计，只需执行以下操作：

HTML:

<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>

.my-div {
  display: inline-block;
  overflow: hidden;
  width: 290px;   /* note the embedded iframe is 302x76 */
  height: 74px;
  text-align: left;
}

.my-div iframe {
  position: relative;
  left: -10px;
}

<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>

.captcha iframe {
      position: relative;
      box-shadow: none !important;
    }