reCAPTCHAをオーバーライドするCSS

Question

私はreCAPTCHAを使用しています。recaptcha_challenge_fieldのテキストエリアは、他のものと重複する再現ボックスの中央に表示されています。私はそれがあるため、このスタイルのだということが見つかりました：

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

私はChromeでstaticにpositionを設定すると、それが正常に見えます。しかし、私はそのCSSオプションを上書きする方法を理解できません。

は、私が試した：

• は自分のCSSにこれを追加する：

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

• のdivクラスを経由して、それを呼び出す名前.recaptcha_text
  • と私のCSS内の別のエントリを追加する（ラップアラウンドテキストエリア）
  • pクラス（textareaを囲む）で呼び出す
  • は、しかし、私は私のCSSはその位置上書きすることができません標準<textarea name="recaptcha_challenge_field" ...>タグ

にposition: 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は

これは、単純なCSSの特異性の問題のように見えます（テストはWebKitのブラウザで動作しているようです）。あなたの後にreCAPTCHA CSSがロードされ、セレクタとそのセレクタの両方が等しい特異性を持ち（宣言ではどちらも!importantです）、最後に指定されているため、勝ちます。

あなたは彼らよりも、あなたのセレクタは、より具体的なことによって、それを修正することができます：

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

私は上記の私のデモでは、と私はpositionの計算値#recaptcha_response_field要素を調べて見ることができることを追加しましたプロパティは今やstaticです。