Javascript ReCaptcha API v2样式

我还没有成功地找到如何设计谷歌新的recaptcha（v2）的风格。最终的目标是使其具有响应性，但我很难将样式应用于像宽度这样的简单事物

除了主题参数之外，他们似乎没有给出任何关于如何控制样式的细节，简单的CSS和JavaScript解决方案对我来说也不起作用

基本上，我需要能够将CSS应用到Google的新版reCaptcha中。可以将JavaScript与之配合使用。

概述： 很抱歉回答了这个坏消息，但是经过研究和调试，很明显没有办法定制新的reCAPTCHA控件的样式。这些控件被包装在一个

iframe

中，这样可以防止使用CSS来设置它们的样式，并防止JavaScript访问内容，甚至排除了黑客解决方案

为什么没有自定义API 与此不同，中没有自定义选项。如果我们考虑这个新的API是如何工作的，这就不足为奇了。 摘录自： 虽然新的reCAPTCHA API听起来可能很简单，但在这个不起眼的复选框背后有着高度的复杂性。CAPTCHA长期以来依赖于机器人无法解决扭曲的文本。然而，我们最近的研究表明，今天的人工智能技术甚至可以以99.8%的准确率解决最困难的变形文本。因此，扭曲的文本本身不再是可靠的测试

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

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

定制主题怎么样 现在是新的API，通过它，您可以选择一个预设的主题，例如

亮

和

暗

。但是，目前还没有一种创建自定义主题的方法。如果我们检查

iframe

，我们会发现

主题

名称在

src

属性的查询字符串中传递。此URL类似于以下内容

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

此参数确定在

iframe

中的包装器元素上使用的CSS类名，并确定要使用的预设主题

通过挖掘缩小的源代码，我发现实际上有4个有效的主题值，比文档中列出的2个要多，但是

default

和

standard

与

light

相同

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

自定义主题没有代码，如果指定了任何其他

主题

值，它将使用

标准

主题

总之：

---

目前，没有办法对新的reCAPTCHA元素进行完全样式化，只有

iframe

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

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

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

---

希望这对任何人都有帮助：-）。

您可以做的是将ReCaptcha控件隐藏在div后面。然后在此div上进行样式设置，并在其上设置css“指针事件：无”，以便您可以单击div（）

---

复选框应位于用户单击的位置。

在google recaptcha元素中添加数据大小属性，并在使用mobile时使其等于“compact”

---

请参阅：

只需添加一个黑客解决方案，使其响应速度更快

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

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

这将产生以下结果：

它现在将水平调整大小，并且没有边框。recaptcha徽标会在右侧被切断，因此我用右侧边框将其隐藏起来。它还隐藏了隐私和术语链接，因此您可能希望将它们添加回

---

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

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

不幸的是，我们无法设计reCaptcha v2，但可以使其看起来更好，下面是代码：

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

.g-recaptcha-outer{
文本对齐：居中；
边界半径：2px；
背景#f9f9f9；
边框样式：实心；
边框颜色：#37474f；
边框宽度：1px；
边框底宽：2px；
}
.g-recaptcha-inner{
宽度：154px；
高度：82px；
溢出：隐藏；
保证金：0自动；
}
.g-recaptcha{
位置：相对位置；
左：-2px；
顶部：-1px；
}

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

我还没有找到任何解决方案，可以在视口发生变化或布局变化时在响应性强的网站上运行

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

.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>

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

.g-recaptcha { display: none; }

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

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

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;

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

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

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

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

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

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

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

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

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

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

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