覆盖reCAPTCHA CSS

Question

我正在使用reCAPTCHA，recaptcha_challenge_field的textarea出现在重新包装盒的中间，与其他内容重叠。我发现这是因为这种风格：

.recaptchatable #recaptcha_response_field {
    position: absolute!important;

当我在Chrome中将position设置为static时，它看起来很不错。但是，我无法弄清楚如何覆盖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（ test 似乎只能在WebKit浏览器中使用）

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

您可以通过使您的选择器比他们的更具体来修复它：

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

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