覆盖reCAPTCHA CSS

Question

我正在使用reCAPTCHA,并且textarea for 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现在确实是static。