小开

最佳答案

概述:

对不起，我要告诉你一个坏消息，但是经过研究和调试，很明显没有办法定制新的 reCAPTCHA 控件的样式。控件被包装在一个 iframe中，这阻止了 CSS 对它们进行样式化，而 Same-Origin Policy阻止了 JavaScript 访问内容，甚至排除了一个蹩脚的解决方案。

为什么没有自定义 API? :

与 ReCAPTCHA API 1.0版不同，API 2.0版中没有自定义选项。如果我们考虑一下这个新 API 是如何工作的，就不会感到惊讶了。

节选自你是机器人吗? 介绍“无验证码重验证码”:

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

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

如果您能够直接操作控制元素的样式，那么您就可以轻松地干扰用户剖析逻辑，这使得新的 reCAPTCHA 成为可能。

定制主题怎么样? :

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

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

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

element class name

通过对缩小的源代码进行深入研究，我发现实际上有4个有效的主题值，比文档中列出的2个要多，但是 default和 standard与 light是相同的。

object of classes

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

class choosing code

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

总结:

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

小开

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

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

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

小开

您可以做的是将 ReCaptcha 控件隐藏在 div 后面。然后在这个 div 上做你的造型。并在其上设置 css“指针事件: 无”，这样您就可以通过 div (Click through a DIV to underlying elements)单击。

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

小开

添加一个数据大小的属性到谷歌资料捕捉元素，使其相当于“紧凑”的情况下的移动。

参考: 谷歌重现你的文档

小开

只是添加了一个黑客式的解决方案，使其响应。

用一个额外的 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;
}

结果如下:

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.

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

小开

在 V2.0中是不可能的。Iframe 屏蔽了所有这些样式。很难添加一个自定义的主题，而不是深色或浅色的。

小开

遗憾的是，我们不能设计 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>

小开

派对迟到了，但也许我的解决方案能帮到别人。

我还没有找到任何解决方案时，视窗变化或布局是流动的反应网站。

因此，我为 django-cms 创建了一个 jQuery 脚本，它可以动态地适应不断变化的 viewport。一旦我需要一个更模块化、没有 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;

小开

通过整合不可见的 reCAPTCHA，你可以做到以下几点:

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

Data-callback = “”这与复选框 captcha 的工作原理类似，但是对于不可见性是必需的。

数据徽章: 这允许您重新定位 reCAPTCHA 徽章(即徽标和 ‘ protected by reCAPTCHA’text)。有效选项为‘ bottomright’(默认值) , ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you 使徽章内联，您可以直接控制徽章的 CSS。

小开

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

看看这个演示 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>

小开

如果有人仍然感兴趣，那么有一个简单的 javascript 库(没有 jQuery 依赖项) ，名为自定义 captcha。它允许您用 css 定制按钮并实现一些 js 事件(ready/check)。这个想法是使默认的重演“不可见”，并把一个按钮在它上面。只要改变重现的身份，就行了。

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

小开

我使用下面的技巧，使其响应和删除边框。这个技巧可能隐藏重演消息/错误。

这个样式适用于 rtlang，但是您可以很容易地改变它。

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

无论你想做的内嵌式样式的小定制..。

希望对你有帮助! ！

小开

我只是添加这种解决方案/快速修复，以便它不会丢失的情况下，一个中断的链接。

这个解决方案的链接 “想要添加链接如何调整谷歌 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>

小开

如果有人挣扎与联系方式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;
}

小开

你可以在你的网站上使用一些 CSS 作为 Google reCAPTCHA v2的样式:

- 更改背景，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 Blog-如何编辑谷歌的 CSS reCAPTCHA (重新样式，改变位置，调整大小 reCAPTCHA 徽章)

你也可以在那里找到 Google reCAPTCHA v3的样式。

小开

我偶然发现这个答案，试图风格的 ReCaptcha v2的网站，有一个光和一个黑暗的模式。又玩了一会儿，发现除了 transform之外，filter也被应用到 iframe元素上，所以最终使用了默认/轻量级的 ReCaptcha，并在用户处于黑暗模式时这样做:

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

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

没有看到这在任何回答或评论，所以决定分享，即使这是一个老线程。

小开

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

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

小开

如果你使用 sss，对我来说很有效:

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

小开

以防有人想要调整小型装置的捕捉器大小。

我使用的是重奏 V2与启动 p-captcha(角度)。问题在于，对于较小的屏幕，它会从屏幕上消失。

虽然您不能实际调整它的大小(外部事物和所有人都在上面解释过它) ，但是有一种方法可以使用 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之外，您还可以使用下面的代码片段

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

之前

之后

小开

Topic 已经过时了，但是我还想扩展 reCAPTCHA 小部件——但是为了让它适用于手机用户，不像其他许多人希望它更小。唯一有效的方法是转换: 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>

小开

让我们来玩一下 JavaScript:

首先，我们知道，重现组件包括所有狗屎从最疯狂的人在谷歌上，所以你只能作出改变的主题“黑暗”和“光”在你的网络。看看我的网站

SantiagoSoñora.

let recaptcha = document.querySelector('.g-recaptcha');

With this, you only can touch simple settings of the badge, like z-index and size, but no much more...

So far, i made two functions that set data-theme to light or dark mode at innit. Note that its neccessary assign the "light" because Google not include that by default.

function reCaptchaDark() {
document.addEventListener('DOMContentLoaded', (event) => {
recaptcha.setAttribute("data-theme", "dark");
})
}


function reCaptchaLight() {
document.addEventListener('DOMContentLoaded', (event) => {
recaptcha.setAttribute("data-theme", "light");
})
}

然后，举个例子，我的网页查看用户是喜欢黑色还是浅色主题，然后将这些配置设置为重现包:

(theme.onLoad = function() {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
reCaptchaDark();
toggleTheme();
}
else {
reCaptchaLight();
}
})();

注意，我的 toggle from dark to light 代码在 toggleTheme ()函数中。继续施展魔法: 你应该在 html 标签或者其他网页上配置一个类，以便在黑暗和光明主题之间做出改变，我们现在在 iframe 上修改 src，这样当我们切换黑暗/光明模式时，我们的按钮就会改变:

theme.onclick = function() {
toggleTheme();
if (html.classList.contains('dark')) {
recaptcha.setAttribute("data-theme", "dark");
setTimeout(function() {
let iframes = document.querySelectorAll('iframe');
iframes[0].src = iframes[0].src.replace('&theme=light', '&theme=dark');
}, 0);
}
else {
recaptcha.setAttribute("data-theme", "light");
setTimeout(function() {
let iframes = document.querySelectorAll('iframe');
iframes[0].src = iframes[0].src.replace('&theme=dark', '&theme=light');
}, 0);
}
}

在这里你去，重现徽章变化从黑暗到光“预先分配”的主题由谷歌坏家伙。

最后但并非最不重要的一个函数，它在默认情况下更新页面以更改主题。这将更新 LocalStorage

(function() {
if( window.localStorage ) {
if( !localStorage.getItem('firstLoad') ) {
localStorage['firstLoad'] = true;
window.location.reload();
}
else
localStorage.removeItem('firstLoad');
}
})();

您可以使用类. gcaptcha-徽章进行一些 css 更改，比如不透明度和 box-shadow,-> (use! important) 就是这样，希望你能在你的网站上实现

小开

你可以试着用这个 css 过滤器给它上色:

.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}


.colorize-navy {
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

对于大小，使用转换 css hack

 .captcha-size {
transform:scale(0.8);transform-origin:0 0
}

ReCaptcha API v2样式

概述:

为什么没有自定义 API? :

节选自 你是机器人吗? 介绍“无验证码重验证码”:

定制主题怎么样? :

总结:

节选自你是机器人吗? 介绍“无验证码重验证码”: