如何修改google captcha iframe样式

时间：2016-09-03 07:11:56

标签： html css iframe

我有以下页面 HERE ，基本上你可以看到有一个谷歌验证码，现在我需要盒子阴影和边框消失所以我应用了以下样式：

.rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}

上述功能不起作用，因为验证码是在iframe中加载的，所以在浏览了一段时间后我想出了以下解决方案：

$('.g-recaptcha iframe').load( function() {
         $('.g-recaptcha iframe').contents().find("head")
          .append($("<style type='text/css'>  .rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}  </style>"));
});

这也行不通，我认为在这种情况下这是错误的，因为谷歌iframe已经在<head>样式元素中有一些自定义样式，所以上面我恐怕可能会覆盖它。

那么我究竟该如何修改google captcha样式？

我想要的只是边界和阴影消失。

2 个答案:

答案 0 :(得分：4)

当我在表单底部包含recaptcha时，我遇到了同样的问题，使用默认的recaptcha边框和框阴影看起来确实不正确。我解决了无法用css或javascript设置recaptcha的问题，创建一个绝对定位的div，与recaptcha相同的大小，边框与我的背景颜色相匹配。这样，默认边框和框阴影就会从网站的用户隐藏。但是，这种方法不适用于IE10及以下版本。我使用条件注释来插入一个样式表，在这些浏览器上隐藏新的div。

HTML：

<div class="recaptcha"><div class="g-recaptcha"></div></div>
<div class="no-border-recaptcha"></div>

CSS：

.no-border-recaptcha{
  width: 304px //same width as the google recaptcha
  height: 78px //same height as the google recaptcha
  position: absolute;
  right: 0 //I have my recaptcha floated to the bottom right of the form
  pointer-events: none //make it so that you can still select the recaptcha behind the new div
  border: 3px solid #f7f7f7 //matches my background color
}

答案 1 :(得分：2)

概述：

很抱歉成为坏消息的回答者，但经过研究和调试后，很明显无法自定义新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样式。

感谢用户Alexander O'Mara

相关问题
最新问题