我发现如何设计Google的新Recaptcha(v2)风格并没有取得太大的成功。最终的目标是使其具有响应性,但是即使对于诸如宽度之类的简单事物,我也难以应用样式。
除了主题参数外,他们的API documentation似乎没有提供有关如何控制样式的任何细节,并且简单的CSS和JavaScript解决方案对我没有用。
基本上,我需要能够将CSS应用于Google的reCaptcha的新版本。可以使用JavaScript。
最佳答案
概述:
抱歉,这是个坏消息的答案,但是经过研究和调试,很显然,没有办法自定义新的reCAPTCHA控件的样式。控件包装在iframe
中,这可以防止使用CSS设置样式,而Same-Origin Policy则可以防止JavaScript访问内容,甚至排除恶意的解决方案。
为什么不自定义API ?:
与reCAPTCHA API Version 1.0不同,API Version 2.0中没有自定义选项。如果我们考虑这个新API的工作原理,那也就不足为奇了。
摘自Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:
如果您能够直接操纵控件元素的样式,则可以轻松地干扰使新的reCAPTCHA成为可能的用户配置逻辑。
那么自定义主题呢?:
现在是新的API does offer a theme
option,您可以通过它选择预设主题,例如light
和dark
。但是,目前还没有创建自定义主题的方法。如果我们检查iframe
,我们会发现theme
名称在src
属性的查询字符串中传递。该URL如下所示。
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
此参数确定iframe
中的wrapper元素上使用的CSS类名称,并确定要使用的预设主题。仔细研究缩小的源代码,我发现实际上有4个有效的主题值,这比文档中列出的2个要多,但是
default
和standard
与light
相同。我们可以在此处看到从该对象中选择类名称的代码。
没有用于自定义主题的代码,并且如果指定了任何其他
theme
值,它将使用standard
主题。综上所述:
目前,尚无法完全样式化新的reCAPTCHA元素,只能对
iframe
周围的包装器元素进行样式化。几乎肯定是有意这样做,以防止用户破坏使新的无验证码复选框成为可能的用户配置逻辑。 Google可能会实现有限的自定义主题API,也许允许您为现有元素选择自定义颜色,但是我不希望Google实现完整的CSS样式。