ReCaptcha API v2 样式

Question

我在寻找如何设置 Google 新的 recaptcha (v2) 样式方面没有取得多大成功。最终目标是使其具有响应性，但我很难将样式应用于宽度等简单的事物。

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

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

Answer 1

概述：

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

为什么不自定义 API？：

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

摘自Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:

虽然新的 reCAPTCHA API 听起来很简单，但在这个不起眼的复选框背后却有着高度的复杂性。长期以来，验证码一直依赖于机器人无法解决扭曲的文本。然而，我们最近的研究表明，当今的人工智能技术甚至可以以 99.8% 的准确率解决最困难的扭曲文本变体。因此，扭曲的文本本身不再是可靠的测试。

为了解决这个问题，去年我们为 reCAPTCHA 开发了一个高级风险分析后端，该后端会积极考虑用户在使用 CAPTCHA 之前、期间和之后的整个过程，以确定该用户是否为人类。这使我们能够减少对输入扭曲文本的依赖，进而为用户提供更好的体验。我们在今年早些时候的情人节帖子中谈到了这一点。

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

自定义主题怎么样？

现在新的 API does offer a theme option，您可以通过它选择预设主题，例如 light 和 dark。但是，目前还没有创建自定义主题的方法。如果我们检查iframe，我们会发现theme 名称是在src 属性的查询字符串中传递的。该 URL 如下所示。

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

该参数决定iframe中的包装元素使用什么CSS类名，并决定使用的预设主题。

挖掘缩小的源代码，我发现实际上有4个有效的主题值，比文档中列出的2个多，但default和standard与light相同。

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

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

结论：

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

Answer 2

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

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

希望这对任何人都有帮助:-)。

Answer 3

您可以做的是将 ReCaptcha 控件隐藏在 div 后面。然后在这个 div 上做你的样式。并在其上设置 css "pointer-events: none"，这样你就可以点击 div (Click through a DIV to underlying elements)。

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

Answer 4

在 google recaptcha 元素中添加一个 data-size 属性，并使其在移动设备上等于“compact”。

参考：google recaptcha docs

Answer 5

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

将验证码包装在一个额外的 div 中：

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

添加样式。这假定为深色主题。

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

这会产生以下结果：

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

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

Answer 6

在 V2.0 中这是不可能的。 iframe 阻止了所有样式。很难添加自定义主题而不是深色或浅色主题。

Answer 7

很遗憾，我们无法设置 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 8

聚会迟到了，但也许我的解决方案会对某人有所帮助。

当视口发生变化或布局流畅时，我还没有找到任何适用于响应式网站的解决方案。

所以我为 django-cms 创建了一个 jQuery 脚本，它可以动态地适应不断变化的视口。 一旦我需要一个更模块化且不依赖 jQuery 的现代变体，我将立即更新此响应。

html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 

CSS

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-origin: top left;
}

js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;

Answer 9

通过集成隐形 reCAPTCHA，您可以执行以下操作：

要启用 Invisible reCAPTCHA，而不是将参数放在 div 中，您可以将它们直接添加到 html 按钮。

一个。数据回调=””。这就像复选框验证码一样工作，但对于不可见是必需的。

b. data-badge：这允许您重新定位 reCAPTCHA 徽章（即徽标和 ‘受 reCAPTCHA’ 文本保护）。有效选项为“bottomright”（默认）， “bottomleft”或“inline”将徽章直接放在按钮上方。如果你 使徽章内联，您可以直接控制徽章的CSS。

Answer 10

您可以重新创建 recaptcha ，将其包装在容器中，并且只让复选框可见。我的主要问题是我无法获取完整宽度，所以现在它扩展到容器宽度。唯一的问题是过期，你可以看到一个轻弹，但一旦它发生，我就会重置它。

查看此演示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 11

如果有人仍然感兴趣，这里有一个简单的 javascript 库（没有 jQuery 依赖项），名为 custom recaptcha。它允许您使用 css 自定义按钮并实现一些 js 事件（准备好/已检查）。这个想法是使默认的recaptcha“不可见”并在其上放置一个按钮。只需更改 recaptcha 的 id 即可。

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

更多信息请参见https://azentreprise.org/read.php?id=1。

Answer 12

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

此样式适用于 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 13

太棒了！ 现在这里有可用于 reCaptcha 的样式。 我只是使用内联样式，例如：

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

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

希望对你有帮助！！

Answer 14

我只是添加这种解决方案/快速修复，这样在链接断开的情况下它不会丢失。

此解决方案"Want to add link How to resize the Google noCAPTCHA reCAPTCHA | The Geek Goddess" 的链接由Vikram Singh Saini 提供，并简单概述了您可以使用内联 CSS 来强制 iframe 的框架。

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-origin:0 0;
  -webkit-transform-origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
</style>

Answer 15

如果有人在联系表格 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 16

您可以在您的网站上为 Google reCAPTCHA v2 样式使用一些 CSS：

– 更改 Google reCAPTCHA v2 小部件的背景、颜色：

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

或

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

– 使用此 sn-p 调整 Google reCAPTCHA v2 小部件的大小：

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

– 响应您的 Google reCAPTCHA v2：

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

以上所有元素，CSS属性仅供参考。您可以自己更改它们（仅使用 CSS 类选择器）。

参考 OIW 博客 - 如何编辑 Google reCAPTCHA 的 CSS（重新样式、更改位置、调整 reCAPTCHA 徽章大小）

您还可以在那里找到 Google reCAPTCHA v3 的样式。

Answer 17

您还可以在dark 或light ReCaptcha 主题之间进行选择。 我在我的一个 Angular 8 应用程序中使用了它

Answer 18

我遇到了这个答案，试图为具有明暗模式的网站设计 ReCaptcha v2 样式。玩了一些，发现除了transform，filter 也适用于iframe 元素，因此最终使用默认/浅色 ReCaptcha 并在用户处于黑暗模式时执行此操作：

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

hue-rotate(180deg) 使徽标在用户单击时仍为蓝色，复选标记仍为绿色，同时将白色的invert()'ed 保持为黑色，反之亦然。

没有在任何答案或评论中看到这一点，因此决定分享，即使这是一个旧线程。

Answer 19

有点晚了，但我尝试了这个，它使 Recaptcha 在小于 460 像素宽度的屏幕上响应。您不能使用 css 选择器来选择 iframe 内的元素。因此，最好使用最外层的父元素，即 g-recaptcha 类来基本上缩小，即转换整个容器的大小。这是我的代码：

@media(max-width:459.99px) {
    .modal .g-recaptcha {
        transform:scale(0.75);
        -webkit-transform:scale(0.75); }
    }
}

Answer 20

如果你使用 scss，那对我有用：

   .recaptcha > div{
      transform: scale(0.84);
      transform-origin: 0;
   }

Answer 21

以防有人想为小型设备调整重新验证码的大小。

我正在使用带有primeng p-captcha 的recaptcha V2（用于角度）。问题是对于较小的屏幕，它会超出屏幕范围。

虽然你不能真正调整它的大小（外部的东西和所有人都在上面解释过）但是transform属性有一种方法（缩放容器）

这是我下面的代码，我实现了它

p-captcha div div {
  transform:scale(0.9) !important;
  -webkit-transform:scale(0.9) !important;
  transform-origin:0 0 !important;
  -webkit-transform-origin:0 0 !important;
}

p-captcha以外的你可以使用下面这个代码sn-p

.g-recaptcha {
  transform:scale(0.9);
  transform-origin:0 0;
 }

之前

之后

Answer 22

主题已过时，但我还想扩展 reCAPTCHA 小部件 - 但要使其对手机用户更大，不像其他许多希望它更小的人。唯一可行的方法是 transform: scale(x)，但这似乎使小部件对我的页面来说太宽，从而缩小了页面上的其余表单。使用如下所示的容器 div 解决了我的问题，希望它可以帮助那些认为更大版本在小屏幕上更好的其他人。

<style>
    :root {
        /* factor to scale the Google widget in potrait mode (on a phone) */
        --recaptcha-scale: 2; 
    }
    @media screen and (orientation: portrait) {

        /* needed to rein in the width of inner div when it is scaled */
        #g_recaptcha_div_container { 
            width: calc(100vmin / var(--recaptcha-scale));
        }
        #g_recaptcha_div {
            transform: scale(var(--recaptcha-scale)); 
            transform-origin: 0 0;
        }
        #submit_button {
            width: 65vmin;
            height: 9vmin;
            font-size: 7vmin;

            /* needed to scoot the button out from under the scaled div */
            margin-top: 10vmin; 
        }
    }
</style>

<html>
<!-- top of form with a bunch of fields to create an acct -->

    <div id="g_recaptcha_div_container">
        <div id="g_recaptcha_div" class="g-recaptcha" data-sitekey="foo">
        </div>
    </div>

    <input id="submit_button" type="submit" value="Create Account">

<!-- bottom of form -->
</html>