Question

我想隐藏recaptcha v2.0小部件的边框，这样我就可以更好地将它整合到我网站的外观中。

注意： 我发布此问题并提供解决方案，因为我在主题中找到的大多数StackOverflow问题都围绕删除了frameborder属性recaptcha的iframe，这在技术上不是我追求的。我追求的结果是 - 一个无边的重新获取的小部件，我可以在更大的视觉环境中定位。

我希望这有用！

Answer 1

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

用另一个div包装recaptcha div（标有“g-recaptcha”类的那个），并将其大小设置为比iframe更小，并使用position：relative和left移动iframe： -10px，隐藏边框。

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

注意：仅在Safari 9.1.2（OSX）上测试过，但我猜这种技术也会转换为其他浏览器。

希望这有帮助！

HTML：

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

的CSS：

.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;
}

Answer 2

注意：：适用于由Google带到这里但遇到不同问题的人

如果您只想隐藏边框而不会使边缘变少，请保留原始设计，请执行以下操作：

HTML：

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

CSS：

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

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

2 个答案: