如何隐藏一个recaptcha v2.0小部件的边框？ [英] how to hide the border of a recaptcha v2.0 widget?

问题描述

我想隐藏recaptcha v2.0小部件的边框，以便我可以更好地将其整合到我网站的外观和感觉中。

注意： 我发布这个问题，并提供一个解决方案，因为大多数StackOverflow问题我已经在主题中心找到了围绕删除的frameborder属性的recaptcha的iframe，这不是技术上我的后。我是在一个无边框recaptcha小部件，我可以在更大的视觉上下文中的位置的结果。

我希望这是有帮助的！ / p>

解决方案

我想隐藏 v2.0 ReCaptcha的边框不是机器人复选框），并解决它如下：

将recaptcha div（标记为类g-recaptcha的那个）另一个div，并且它的大小比iframe小一点，并使用position：relative和left：-10px来移动iframe，以隐藏边框。

如果你使用的是compact版本，你需要调整sizing ... css我提供的工作为正常版本。

注意：仅在Safari 9.1.2（OSX）上测试，但我猜测该技术也会翻译成其他浏览器。 / p>

希望这有助于！

html：

 < div class =my-div>< div class =g-recaptchadata-size =normaldata-sitekey =< your site key> >< / div>< div> 
  

css：

 code> .my-div {
 display：inline-block; 
 overflow：hidden; 
 width：290px; / *注意嵌入的iframe是302x76 * / 
 height：74px; 
 text-align：left; 
} 
 
 .my-div iframe {
 position：relative; 
 left：-10px; 
} 
  

I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.

NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.

I hope this is helpful!

解决方案

I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:

Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.

If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.

NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.

Hope this helps!

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

这篇关于如何隐藏一个recaptcha v2.0小部件的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！