CODEWITHSUNDEEP
cssrecaptcha
yellowreign
yellowreign

Reputation: 3638

Overriding reCAPTCHA CSS

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:

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!

Upvotes: 5

Views: 9768

Answers (1)

thirtydot
thirtydot

Reputation: 228222

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.

Upvotes: 2

Related Questions