Javascript ReCaptcha API v2 样式

Question

提问by jhawes

I have not had much success finding how to style Google's new recaptcha (v2). The eventual goal is to make it responsive, but I am having difficulty applying styling for even simple things like width.

我在找到如何为 Google 的新 recaptcha (v2) 设计样式方面并没有取得多大成功。最终的目标是使其具有响应性，但即使是像宽度这样的简单事物，我也很难应用样式。

Their API documentationdoes not appear to give any specifics on how to control styling at all other than the themeparameter, and simple CSS & JavaScript solutions haven't worked for me.

除了主题参数之外，他们的API 文档似乎没有提供任何关于如何控制样式的细节，并且简单的 CSS 和 JavaScript 解决方案对我不起作用。

Basically, I need to be able to apply CSS to Google's new version of reCaptcha. Using JavaScript with it is acceptable.

基本上，我需要能够将 CSS 应用于 Google 的新版本 reCaptcha。使用 JavaScript 是可以接受的。

Answer 1

回答by Alexander O'Mara

Overview:

概述：

Sorry to be the answerer of bad news, but after research and debugging, it's pretty clear that there is no way to customize the styling of the new reCAPTCHA controls. The controls are wrapped in an iframe, which prevents the use of CSS to style them, and Same-Origin Policyprevents JavaScript from accessing the contents, ruling out even a hacky solution.

很抱歉成为坏消息的回答者，但经过研究和调试，很明显没有办法自定义新 reCAPTCHA 控件的样式。控件被包裹在一个中iframe，这阻止了使用 CSS 来设置它们的样式，同源策略阻止 JavaScript 访问内容，甚至排除了一个hacky 的解决方案。

Why No Customize API?:

为什么没有自定义 API？：

Unlike reCAPTCHA API Version 1.0, there are no customize options in API Version 2.0. If we consider how this new API works, it's no surprise why.

与reCAPTCHA API 版本 1.0不同，API 版本 2.0中没有自定义选项。如果我们考虑一下这个新 API 是如何工作的，那么原因就不足为奇了。

Excerpt from Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:

摘自你是机器人吗？介绍“无验证码 reCAPTCHA”：

While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today's Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.
To counter this, last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user's entire engagement with the CAPTCHA—before, during, and after—to determine whether that user is a human. This enables us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our Valentine's Day post earlier this year.

虽然新的 reCAPTCHA API 听起来很简单，但在这个不起眼的复选框背后却有着高度的复杂性。CAPTCHA 长期以来一直依赖于机器人无法解决扭曲的文本。然而，我们最近的研究表明，当今的人工智能技术甚至可以以 99.8% 的准确率解决最困难的扭曲文本变体。因此，扭曲的文本本身不再是可靠的测试。
为了解决这个问题，去年我们为 reCAPTCHA 开发了一个高级风险分析后端，它积极考虑用户与 CAPTCHA 的整个互动——之前、期间和之后——以确定该用户是否是人类。这使我们能够减少对输入扭曲文本的依赖，进而为用户提供更好的体验。我们在今年早些时候的情人节帖子中谈到了这一点。

If you were able to directly manipulate the styling of the control elements, you could easily interfere with the user-profiling logic that makes the new reCAPTCHA possible.

如果您能够直接操纵控制元素的样式，则很容易干扰使新 reCAPTCHA 成为可能的用户分析逻辑。

What About a Custom Theme?:

自定义主题怎么样？：

Now the new API does offer a themeoption, by which you can choose a preset theme such as lightand dark. However there is not presently a way to create a custom theme. If we inspect the iframe, we will find the themename is passed in the query string of the srcattribute. This URL looks something like the following.

现在新的 API确实提供了一个theme选项，您可以通过该选项选择一个预设主题，例如light和dark。但是，目前还没有创建自定义主题的方法。如果我们检查iframe，我们会发现theme名称是在src属性的查询字符串中传递的。此 URL 类似于以下内容。

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

This parameter determines what CSS class name is used on the wrapper element in the iframeand determines the preset theme to use.

此参数确定在中的包装元素上使用的 CSS 类名称，iframe并确定要使用的预设主题。

element class name

元素类名

Digging through the minified source, I found that there are actually 4 valid theme values, which is more than the 2 listed in the documentation, but defaultand standardare the same as light.

通过精缩源挖，我发现，实际上有4个有效主题值，这是比文档中列出的2个，但default和standard是相同的light。

object of classes

类的对象

We can see the code that selects the class name from this object here.

我们可以在这里看到从这个对象中选择类名的代码。

class choosing code

选课代码

There is no code for a custom theme, and if any other themevalue is specified, it will use the standardtheme.

自定义主题没有代码，如果theme指定了任何其他值，它将使用standard主题。

In Conclusion:

综上所述：

At present, there is no way to fully style the new reCAPTCHA elements, only the wrapper elements around the iframecan be stylized. This was almost-certainly done intentionally, to prevent users from breaking the user profiling logic that makes the new captcha-free checkbox possible. It is possible that Google could implement a limited custom theme API, perhaps allowing you to choose custom colors for existing elements, but I would not expect Google to implement full CSS styling.

目前，无法完全设置新的 reCAPTCHA 元素的样式，只能对周围的包装元素iframe进行样式化。这几乎可以肯定是故意完成的，以防止用户破坏使新的无验证码复选框成为可能的用户分析逻辑。谷歌有可能实现有限的自定义主题 API，也许允许您为现有元素选择自定义颜色，但我不希望谷歌实现完整的 CSS 样式。

Answer 2

回答by bubb

As guys mentioned above, there is no way ATM. but still if anyone interested, then by adding in just two lines you can at least make it look reasonable, if it break on any screen. you can assign different value in @media query.

正如上面提到的，ATM没有办法。但仍然如果有人感兴趣，那么通过添加两行，你至少可以使它看起来合理，如果它在任何屏幕上中断。您可以在@media 查询中分配不同的值。

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Hope this helps anyone :-).

希望这可以帮助任何人:-)。

Answer 3

回答by Sumit Maingi

Add a data-size property to the google recaptcha element and make it equal to "compact" in case of mobile.

将 data-size 属性添加到 google recaptcha 元素，并在移动设备的情况下使其等于“compact”。

Refer: google recaptcha docs

参考：google recaptcha docs

Answer 4

回答by Tom Chan

Unfortunately we cant style reCaptcha v2, but it is possible to make it look better, here is the code:

不幸的是，我们无法设置 reCaptcha v2 的样式，但可以让它看起来更好，这是代码：

Click here to preview

点击这里预览

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

Answer 5

回答by Magu

What you can do is to hide the ReCaptcha Control behind a div. Then make your styling on this div. And set the css "pointer-events: none" on it, so you can click through the div (Click through a DIV to underlying elements).

您可以做的是将 ReCaptcha Control 隐藏在 div 后面。然后在这个 div 上做你的样式。并在其上设置 css“pointer-events: none”，以便您可以单击 div（单击 DIV 到底层元素）。

The checkbox should be in a place where the user is clicking.

复选框应该在用户点击的地方。

Answer 6

回答by alejandro

You can recreate recaptcha , wrap it in a container and only let the checkbox visible. My main problem was that I couldn't take the full width so now it expands to the container width. The only problem is the expiration you can see a flick but as soon it happens I reset it.

您可以重新创建 recaptcha ，将其包装在容器中，并且只让复选框可见。我的主要问题是我不能采用全宽，所以现在它扩展到容器宽度。唯一的问题是您可以看到轻弹的到期时间，但一旦发生，我将其重置。

See this demo http://codepen.io/alejandrolechuga/pen/YpmOJX

看到这个演示http://codepen.io/alejandrolechuga/pen/YpmOJX

function recaptchaReady () {
  grecaptcha.render('myrecaptcha', {
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
});
}

.recaptcha-wrapper {
    height: 70px;
  overflow: hidden;
  background-color: #F9F9F9;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  height: 70px;
  position: relative;
  margin-top: 17px;
  border: 1px solid #d3d3d3;
  color: #000;
}

.recaptcha-info {
  background-size: 32px;
  height: 32px;
  margin: 0 13px 0 13px;
  position: absolute;
  right: 8px;
  top: 9px;
  width: 32px;
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
  background-repeat: no-repeat;
}
.rc-anchor-logo-text {
  color: #9b9b9b;
  cursor: default;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-top: 5px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 37px;
}
.rc-anchor-checkbox-label {
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  left: 50px;
  top: 26px;
  position: absolute;
  color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
  border: none;
}
.rc-anchor-pt {
  color: #9b9b9b;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 8px;
  font-weight: 400;
  right: 10px;
  top: 53px;
  position: absolute;
  a:link {
    color: #9b9b9b;
    text-decoration: none;
  }
}

g-recaptcha {
  // transform:scale(0.95);
  // -webkit-transform:scale(0.95);
  // transform-origin:0 0;
  // -webkit-transform-origin:0 0;

}

.g-recaptcha {
  width: 41px;

  /* border: 1px solid red; */
  height: 38px;
  overflow: hidden;
  float: left;
  margin-top: 16px;
  margin-left: 6px;
  
    > div {
    width: 46px;
    height: 30px;
    background-color:  #F9F9F9;
    overflow: hidden;
    border: 1px solid red;
    transform: translate3d(-8px, -19px, 0px);
  }
  div {
    border: 0;
  }
}

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>

<div class="recaptcha-wrapper">
  <div id="myrecaptcha" class="g-recaptcha"></div>
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
        <div class="recaptcha-info"></div>
        <div class="rc-anchor-logo-text">reCAPTCHA</div>
        <div class="rc-anchor-pt">
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
          <span aria-hidden="true" role="presentation"> - </span>
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
        </div>
</div>

Answer 7

回答by Ahmad Dehnavi

I use below trick to make it responsive and remove borders. this tricks maybe hide recaptcha message/error.

我使用以下技巧使其响应并删除边框。这个技巧可能会隐藏 recaptcha 消息/错误。

This style is for rtl lang but you can change it easy.

此样式适用于 rtl lang，但您可以轻松更改它。

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Answer 8

回答by Anileweb

Great! Now here is styling available for reCaptcha.. I just use inline styling like:

伟大的！现在这里有可用于 reCaptcha 的样式。我只使用内联样式，例如：

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div>

whatever you wanna to do small customize in inline styling...

无论您想在内联样式中进行什么小的自定义...

Hope it will help you!!

希望能帮到你！！

Answer 9

回答by Ouahib Abdallah

In case someone struggling with the recaptcha of contact form 7 (wordpress) here is a solution working for me

如果有人在联系表格 7（wordpress）的重新验证码中挣扎，这里有一个对我有用的解决方案

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

Answer 10

回答by kthornbloom

Just adding a hack-ish solution to make it responsive.

只需添加一个hack-ish解决方案即可使其响应。

Wrap the recaptcha in an extra div:

将 recaptcha 包装在一个额外的 div 中：

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Add styles. This assumes the dark theme.

添加样式。这假设了黑暗主题。

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

This yields the following:

这产生以下结果：

It will now resize horizontally, and doesn't have a border. The recaptcha logo would get cut off on the right, so I am hiding it with a border-right. It's also hiding the privacy and terms links, so you may want to add those back in.

它现在将水平调整大小，并且没有边框。recaptcha 徽标会在右侧被切断，因此我将其隐藏在右侧边框中。它还隐藏了隐私和条款链接，因此您可能需要重新添加它们。

I attempted to set a height on the wrapper element, and then vertically center the recaptcha to reduce the height. Unfortunately, any combo of overflow:hidden and a smaller height seems to kill the iframe.

我试图在包装器元素上设置一个高度，然后垂直居中recaptcha 以降低高度。不幸的是，任何溢出：隐藏和较小高度的组合似乎都会杀死 iframe。

Javascript ReCaptcha API v2 样式

提问by jhawes

回答by Alexander O'Mara

Overview:

概述：

Why No Customize API?:

为什么没有自定义 API？：

Excerpt from Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:

摘自你是机器人吗？介绍“无验证码 reCAPTCHA”：

What About a Custom Theme?:

自定义主题怎么样？：

In Conclusion:

综上所述：

回答by bubb

回答by Sumit Maingi

回答by Tom Chan

回答by Magu

回答by alejandro

回答by Ahmad Dehnavi

回答by Anileweb

回答by Ouahib Abdallah

回答by kthornbloom

相关推荐

最近更新

标签

Javascript ReCaptcha API v2 样式

提问by jhawes

回答by Alexander O'Mara

Overview:

概述：

Why No Customize API?:

为什么没有自定义 API？：

Excerpt from Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:

摘自你是机器人吗？介绍“无验证码 reCAPTCHA”：

What About a Custom Theme?:

自定义主题怎么样？：

In Conclusion:

综上所述：

回答by bubb

回答by Sumit Maingi

回答by Tom Chan

回答by Magu

回答by alejandro

回答by Ahmad Dehnavi

回答by Anileweb

回答by Ouahib Abdallah

回答by kthornbloom

相关推荐

Javascript html - 如何在加载时填充输入文本？

Safari 和 chrome javascript 控制台多行

Javascript Moment.js 从日期中获取日期名称

Javascript 按属性值对对象进行排序

相关推荐

最近更新

标签