Reemplazando reCAPTCHA CSS

Question

Estoy usando reCAPTCHA, y el área de texto para recaptcha_challenge_field aparece en el medio del recuadro recaptcha superponiéndose a otras cosas. He descubierto que es a causa de este estilo:

.recaptchatable #recaptcha_response_field { 
    position: absolute!important; 

cuando me puse position-static en Chrome, se ve bien. Sin embargo, no puedo descifrar cómo sobrescribir esa opción de CSS.

me trataron:

• añadiendo esto a mi propio CSS:

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

• añadiendo otra entrada en mi CSS con el nombre .recaptcha_text
  • llamándolo a través div class (envolviendo textarea)
  • llamándolo a través de la clase p (envolviendo el área de texto)
  • añadiendo position: static!important; a la etiqueta estándar <textarea name="recaptcha_challenge_field" ...>

Sin embargo, no puedo conseguir mi css para sobrescribir esa posición: estática importante; que viene con el guión:

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

¿Alguien puede ayudar con lo que estoy haciendo mal? ¡Gracias!

Answer 1

De las pruebas aquí: http://jsbin.com/otihuk/edit#html,live (la prueba de sólo parece funcionar en los navegadores WebKit)

Esto se ve como un simple problema de CSS especificidad. El reCAPTCHA CSS se carga después del tuyo, y tanto tu selector como el suyo tienen la misma especificidad (y ambos tienen !important en la declaración), y así porque el suyo se especifica al final, gana.

Puede fijarlo al hacer que su selector más específico que el de ellos:

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

He añadido que, en mi demo anterior, y puedo ver inspeccionando el elemento #recaptcha_response_field que el valor calculado de la position la propiedad ahora es de hecho static.