Ignora reCAPTCHA CSS

Question

Sto utilizzando reCAPTCHA e la textarea per recaptcha_challenge_field viene visualizzata nel mezzo della casella di ricapitolazione che si sovrappone ad altre cose. Ho scoperto che è a causa di questo stile:

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

quando ho impostato position-static in Chrome, tutto sembra a posto. Tuttavia, non riesco a capire come sovrascrivere l'opzione CSS.

ho provato:

• l'aggiunta di questo al mio CSS:

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

• aggiungendo un'altra voce nel mio CSS con il nome .recaptcha_text
  • definendolo via div class (avvolgono textarea)
  • chiamandolo tramite p classe (avvolgendo textarea)
  • aggiungendo position: static!important; al <textarea name="recaptcha_challenge_field" ...> tag standard

Tuttavia, non posso avere il mio css per sovrascrivere quella posizione:! Statica importante; che si conclude con la sceneggiatura:

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

Qualcuno può aiutare con quello che sto facendo male? Grazie!

Answer 1

Da test qui: http://jsbin.com/otihuk/edit#html,live (il test di sembra funzionare solo in browser WebKit)

Questo appare come un semplice problema di CSS specificità. Il CSS reCAPTCHA viene caricato dopo il tuo, e sia il tuo selettore che i loro hanno la stessa specificità (e entrambi hanno !important nella dichiarazione), e così, poiché il loro è stato specificato per ultimo, vince.

È possibile risolvere il problema facendo il vostro selettore più specifico di loro:

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

Ho aggiunto che nel mio demo sopra, e posso vedere ispezionando l'elemento #recaptcha_response_field che il valore calcolato della position la proprietà è ora effettivamente static.