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

Question

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

注意： 我将其作为问题发布并提供解决方案，因为我在主题中心找到的大多数 Whosebug 问题围绕删除 recaptcha 的 iframe 的 frameborder 属性，这在技术上不是我所追求的。我追求的结果是——一个无边的 recaptcha 小部件，我可以将其放置在更大的视觉环境中。

希望对您有所帮助！

Answer 1

我想隐藏v2.0 ReCaptcha（带"I'm not a robot"复选框的那个）的边框，解决方法如下：

用另一个 div 包裹 recaptcha div（标有 class "g-recaptcha" 的那个），大小比 iframe 小一点在 at 中，并使用 position: relative 和 left: -10px 移动 iframe，以隐藏边框。

如果您使用的是 "compact" 版本，则需要调整大小...我提供的 css 适用于 "normal" 版本。

注意：仅在 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;
    }