CSS redefinition reCAPTCHA

I use reCAPTCHA , and the text box for recaptcha_challenge_fieldappears in the middle of the recaptcha window, overlapping other things. I found that this is because of this style:

.recaptchatable #recaptcha_response_field {
    position: absolute!important;

when i install positionin staticin chrome it looks ok. However, I cannot figure out how to overwrite this CSS parameter.

I tried:

  • adding this to my own CSS:

    .recaptchatable #recaptcha_response_field {
         position: static !important;
    }
    
  • adding another entry to my CSS named .recaptcha_text
    • calling it through a div class (wrap textarea)
    • calling it via class p (wrap textarea)
    • add position: static!important;to standard tag<textarea name="recaptcha_challenge_field" ...>

However, I cannot get my css to overwrite this position: static! important; which comes with a script:

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

Can someone please help with what I am doing wrong? Thank!

+5
1

: http://jsbin.com/otihuk/edit#html,live ( WebKit)

CSS. CSS- reCAPTCHA , ( !important ), , , .

, , :

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

, , #recaptcha_response_field, position static.

+2

All Articles