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

【问题标题】：how to hide the border of a recaptcha v2.0 widget?如何隐藏 recaptcha v2.0 小部件的边框？
【发布时间】：2016-12-30 21:48:31
【问题描述】：

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

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

希望对你有帮助！

【问题讨论】：

标签： html css recaptcha

【解决方案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;
}

【讨论】：

【解决方案2】：

注意：对于由谷歌带到这里但有不同问题的人

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

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

【讨论】：