我还没有成功找到如何设计Google的新验证码（v2）。最终目标是使其具有响应性，但我很难将样式应用于宽度等简单事物。
他们的API文档似乎没有给出任何关于如何控制样式的细节，除了主题参数，简单的CSS和JavaScript解决方案对我来说不起作用。
基本上，我需要能够将CSS应用于Google的新版本的reCaptcha。使用JavaScript是可以接受的。
很抱歉成为坏消息的回答者，但经过研究和调试，很明显，没有办法自定义新的reCAPTCHA控件的样式。这些控件被包装在 一个 中，这可以防止使用 CSS 来设置它们的样式，而同源策略会阻止 JavaScript 访问内容，甚至排除了黑客解决方案。iframe
与 reCAPTCHA API 版本 1.0 不同，API 版本 2.0 中没有自定义选项。如果我们考虑这个新API是如何工作的，那么为什么也就不足为奇了。
虽然新的reCAPTCHA API听起来很简单，但在这个适度的复选框背后有高度的复杂性。长期以来，CAPTCHA一直依赖于机器人无法解决扭曲的文本。然而，我们最近的研究表明，今天的人工智能技术甚至可以以99.8%的准确率解决最困难的扭曲文本变体。因此，扭曲的文本本身不再是一个可靠的测试。
为了解决这个问题，去年我们为reCAPTCHA开发了一个高级风险分析后端，该后端会积极考虑用户与CAPTCHA的整个参与度 - 之前，期间和之后 - 以确定该用户是否是人类。这使我们能够减少对键入扭曲文本的依赖，从而为用户提供更好的体验。我们在今年早些时候的情人节帖子中谈到了这一点。
如果您能够直接操作控制元素的样式，则很容易干扰用户分析逻辑，从而使新的 reCAPTCHA 成为可能。
现在，新的API确实提供了一个主题选项，通过该选项，您可以选择预设的主题，例如和。但是，目前还没有创建自定义主题的方法。如果我们检查 ，我们将发现该名称是在属性的查询字符串中传递的。此 URL 如下所示。lightdarkiframethemesrc
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
此参数确定在 中的包装器元素上使用的 CSS 类名，并确定要使用的预设主题。iframe
通过挖掘缩小的源，我发现实际上有4个有效的主题值，这比文档中列出的2个值多，但是并且与.defaultstandardlight
我们可以在此处看到从此对象中选择类名的代码。
自定义主题没有代码，如果指定了任何其他值，它将使用该主题。themestandard
目前，没有办法完全样式新的reCAPTCHA元素，只有周围的包装元素可以风格化。这几乎可以肯定是故意完成的，以防止用户破坏用户分析逻辑，从而使新的无验证码复选框成为可能。Google可以实现有限的自定义主题API，也许允许您为现有元素选择自定义颜色，但我不希望Google实现完整的CSS样式。iframe
正如上面提到的，没有办法ATM.但是如果有人感兴趣，那么只要添加两行，你至少可以让它看起来合理，如果它在任何屏幕上坏了。您可以在查询中@media分配不同的值。
<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>
希望这对任何人有所帮助：-）。
