概述：

Question

我没有成功找到如何设计谷歌的新recaptcha（v2）。最终的目标是让它具有响应性，但是我很难应用样式来处理宽度等简单的事情。

他们的API documentation似乎没有提供任何关于如何控制除主题参数以外的样式的细节，以及简单的CSS＆amp; 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可能听起来很简单，但这个适度的复选框背后有很高的复杂程度。长期以来，CAPTCHA一直依赖于机器人无法解决扭曲的文本。然而，我们的研究最近表明，今天的人工智能技术甚至能够以99.8％的准确度解决扭曲文本中最难的变体。因此，扭曲的文本本身不再是可靠的测试。

为了解决这个问题，去年我们为reCAPTCHA开发了一个高级风险分析后端，该后端主动考虑用户在CAPTCHA之前，期间和之后的整个参与度，以确定该用户是否为人。这使我们能够更少地依赖于输入扭曲的文本，从而为用户提供更好的体验。我们在今年早些时候的情人节那天发表了这篇文章。

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

自定义主题怎么样？：

现在是新的API does offer a theme option，您可以通过它选择预设主题，例如light和dark。但是，目前没有办法创建自定义主题。如果我们检查iframe，我们会在theme属性的查询字符串中找到src名称。此URL类似于以下内容。

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

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

element class name

通过缩小的源代码，我发现实际上有4个有效的主题值，超过了文档中列出的2个，但default和standard与{{1}相同}}

object of classes

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

class choosing code

自定义主题没有代码，如果指定了任何其他light值，则会使用theme主题。

结论：

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

Answer 2

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

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

希望这可以帮助任何人： - ）。

Answer 3

不幸的是我们不能设置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 4

将数据大小属性添加到google recaptcha元素，并在移动设备中将其设置为“compact”。

参考：google recaptcha docs

Answer 5

你可以做的是隐藏div后面的ReCaptcha控件。然后在这个div上做你的造型。并在其上设置css“pointer-events：none”，这样您就可以点击div（Click through a DIV to underlying elements）。

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

Answer 6

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

请参阅此演示http://codepen.io/alejandrolechuga/pen/YpmOJX

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

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

这种风格适用于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

只需添加一个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垂直居中以减小高度。不幸的是，任何溢出的组合：隐藏和较小的高度似乎会杀死iframe。

Answer 9

在V2.0中

是不可能的。 iframe阻止了所有样式。添加自定义主题而不是黑暗或轻松主题很难。

Answer 10

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

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

一个。数据回调=””。这就像复选框验证码一样，但是对于隐形验证是必需的。

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

Answer 11

大！现在这里有reCaptcha的样式.. 我只是使用内联样式：

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

无论你想做什么，都可以自定义内联样式......

希望它能帮到你!!

Answer 12

万一有人遇到联系表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 13

晚会，但也许我的解决方案会帮助某人。

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

所以我为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 14

我遇到了这个答案，试图为具有亮暗模式的网站设计ReCaptcha v2。玩了更多之后，发现transform除了filter之外，还应用于iframe元素，因此最终使用了默认/浅色ReCaptcha，并在用户处于黑暗模式时这样做： / p>

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

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

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

Answer 15

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

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

Answer 16

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

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

Answer 17

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

Answer 18

我只是添加了这种解决方案/快速修复，以便在链接断开时不会丢失。

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

如果有人仍然感兴趣，有一个简单的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 20

您可以在网站上的 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的样式。

ReCaptcha API v2样式

20 个答案:

概述：

为什么没有自定义API？：

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

自定义主题怎么样？：

结论：