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

Question

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

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

希望对您有所帮助!

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