概述：

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

为什么没有自定义 API？：

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

摘自你是机器人吗？介绍“无验证码 reCAPTCHA”：

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

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

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

自定义主题怎么样？：

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

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

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

通过精缩源挖，我发现，实际上有4个有效主题值，这是比文档中列出的2个，但default和standard是相同的light。

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

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

综上所述：

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

我使用以下技巧使其响应并删除边框。这个技巧可能会隐藏 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>

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

参考：google recaptcha docs