css - 覆盖 reCAPTCHA CSS

Question

我正在使用 reCAPTCHA ，以及 recaptcha_challenge_field 的文本区域出现在 recaptcha 框的中间，与其他东西重叠。我发现是因为这种风格:

.recaptchatable #recaptcha_response_field {
    position: absolute!important;

当我设置 position 时至 static在 Chrome 中，它看起来不错。但是，我不知道如何覆盖该 CSS 选项。

我试过:

• 将其添加到我自己的 CSS 中:

  .recaptchatable #recaptcha_response_field {
       position: static !important;
  }
  

• 在我的 CSS 中添加另一个名为 .recaptcha_text 的条目
  • 通过 div 类调用它(围绕 textarea)
  • 通过 p 类调用它(环绕 textarea)
  • 添加position: static!important;符合标准<textarea name="recaptcha_challenge_field" ...>标签

但是，我无法让我的 css 覆盖那个位置:static!important;随脚本而来:

<script type="text/javascript"
 src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
     height="300" width="500" frameborder="0"></iframe><br>
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

有人可以帮助我做错什么吗？谢谢!

Answer 1

从这里测试:http://jsbin.com/otihuk/edit#html,live (测试 似乎只适用于 WebKit 浏览器)

这看起来像是一个简单的 CSS 特异性问题。 reCAPTCHA CSS 在您的之后加载，您的选择器和他们的选择器具有相同的特异性(并且在声明中都有 !important)，因此因为他们的选择器最后指定，所以它获胜。

你可以通过让你的选择器比他们的更具体来解决这个问题:

#recaptcha_area #recaptcha_response_field {
    position: static !important;
}

我在上面的演示中添加了它，我可以通过检查 #recaptcha_response_field 元素看到 position 属性的计算值现在确实是 静态。