覆盖reCAPTCHA CSS

Question

我使用reCAPTCHA，并且recaptcha_challenge_field的textarea出现在recaptcha框的中间，与其他东西重叠。我发现，这是因为这种风格：

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

，当我在Chrome设置position到static，它看起来不错。但是，我无法弄清楚如何覆盖该CSS选项。

我想：

• 加入这个我自己的CSS：

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

• 添加名为.recaptcha_text
  • 通过DIV类调用它在我的CSS另一个条目（包绕textarea）
  • 通过p类调用它（环绕textarea）
  • 加入position: static!important;的标准<textarea name="recaptcha_challenge_field" ...>标签

但是，我不能让我的CSS覆盖该位置：静态重要;与脚本过来：

<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。