我发现如何设计Google的新Recaptcha（v2）风格并没有取得太大的成功。最终的目标是使其具有响应性，但是即使对于诸如宽度之类的简单事物，我也难以应用样式。

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

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

概述：

抱歉，这是个坏消息的答案，但是经过研究和调试，很显然，没有办法自定义新的reCAPTCHA控件的样式。控件包装在中iframe，防止使用CSS设置样式，而Same-Origin Policy阻止JavaScript访问内容，甚至排除恶意的解决方案。

为什么不自定义API ？：

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

摘录自您是机器人吗？引入“无验证码”：

尽管新的reCAPTCHA API听起来很简单，但该适度的复选框后面却非常复杂。验证码长期以来一直依靠机器人无法解决变形的文本。但是，我们最近的研究表明，当今的人工智能技术甚至可以以99.8％的精度解决最困难的变形文本。因此，失真的文本本身不再是可靠的测试。

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

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

那么自定义主题呢？：

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

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

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

深入研究缩小的来源，我发现实际上有4个有效的主题值，该值比文档中列出的2个要大，但default与standard相同light。

我们可以在此处看到从该对象中选择类名称的代码。

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

结论：

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

正如上面提到的，ATM是不可能的。但是如果仍然有人感兴趣，那么只要在任何屏幕上中断，只要添加两行代码，至少可以使它看起来合理。您可以在@media查询中分配其他值。

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

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

不幸的是，我们无法设置reCaptcha v2的样式，但是可以使其外观更好，这是代码：

点击这里预览

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

将数据大小属性添加到google recaptcha元素，并使其在移动情况下等于“紧凑”。

参考：google 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>

您可以做的是将ReCaptcha控件隐藏在div后面。然后在此div上进行样式设置。并在其上设置css“ pointer-events：none”，因此您可以单击div（单击DIV到基础元素）。

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

您可以重新创建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>

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

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

无论您想进行内联样式的小型自定义...

希望对您有帮助！！

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

将Recaptcha包装成一个额外的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。

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

通过集成不可见的reCAPTCHA，您可以执行以下操作：

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

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

b。数据徽章：这使您可以重新放置reCAPTCHA徽章（即徽标和“受reCAPTCHA保护”的文本）。有效选项包括'bottomright'（默认），'bottomleft'或'inline'，它们会将徽标直接放在按钮上方。如果使徽章内联，则可以直接控制徽章的CSS。

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

晚会晚了，但也许我的解决方案会有所帮助。

当视口更改或布局不固定时，我还没有找到任何适用于响应式网站的解决方案。

因此，我为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;

如果仍然有人感兴趣，则有一个简单的JavaScript库（无jQuery依赖项），名为自定义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。

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

链接到此解决方案“想添加链接如何调整Google noCAPTCHA reCAPTCHA的尺寸|极客女神”  由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>

您也可以在深色或浅色 ReCaptcha主题之间进行选择。我在Angular 8应用之一中使用了此功能

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

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

将hue-rotate(180deg)使得它如此的标志仍然是蓝色，当用户点击它，同时保持白色复选标记仍然是绿色invert()“版为黑色，反之亦然。

在任何答案或评论中都没有看到此内容，因此决定共享，即使这是一个旧主题。

您可以在网站上为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; }

–使用以下代码段调整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的样式。