Overriding reCAPTCHA CSS

Question

I'm using reCAPTCHA, and the textarea for recaptcha_challenge_field is appearing in the middle of the recaptcha box overlapping other things. I found that it's because of this style:

.recaptchatable #recaptcha_response_field {
    position: absolute!important;

when I set position to static in Chrome, it looks fine. However, I can't figure out how to overwrite that CSS option.

I tried:

• adding this to my own CSS:

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

• adding another entry in my CSS with the name .recaptcha_text
  • calling it via div class (wrapping around textarea)
  • calling it via p class (wrapping around textarea)
  • adding position: static!important; to the standard <textarea name="recaptcha_challenge_field" ...> tag

However, I can't get my css to overwrite that position: static!important; that comes over with the 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'm doing wrong? Thank you!

Answer 1

From testing here: http://jsbin.com/otihuk/edit#html,live (the test only seems to work in WebKit browsers)

This looks like a simple CSS specificity issue. The reCAPTCHA CSS is loaded after yours, and both your selector and theirs have equal specificity (and both have !important in the declaration), and so because theirs is specified last, it wins.

You can fix it by making your selector more specific than theirs:

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

I've added that in my demo above, and I can see by inspecting the #recaptcha_response_field element that the computed value of the position property is now indeed static.