如何隱藏Recaptcha v2.0小部件的邊框？

Question

我想隱藏recaptcha v2.0小部件的邊框，以便可以更好地在視覺上將其集成到網站的外觀中。

注意： 我將其作為一個問題發布並提供解決方案，因為我在主題上發現的大多數StackOverflow問題都圍繞着刪除Recaptcha的iframe的frameborder屬性，從技術上講，這並不是我想要的。 我追求的是-無邊緣的Recaptcha小部件，可以將其放置在較大的視覺環境中。

我希望這是有幫助的！

Answer 1

我想隱藏v2.0 ReCaptcha（帶有“我不是機器人”復選框的復選框）的邊框，並按以下方法解決：

將Recaptcha div（標有“ g-recaptcha”類的div）包裝成另一個div，並將其尺寸設置為比iframe所出現的尺寸小一點，然后使用position：relative and left：-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;
    }