CODEWITHSUNDEEP
javascripthtmlcssrecaptcha
Andreas Wik
Andreas Wik

Reputation: 99

Recaptcha buttons ugly, cannot fix

First of all, I just want you to know that I have indeed checked the "Recaptcha is broken" question where the solution to their problem was setting the line-height to 0. This does not help me unfortunately.

I've implemented Google's tremendous Recaptcha on my website, but there's this one problem; The buttons have white space above and underneath them, and so there's this really ugly graphics-border under my Recaptcha box. Check the image below. I checked the source code in the browser and it seems as if it generates an iFrame, which means I obviously can't affect the style. Wtf?

enter image description here

Upvotes: 0

Views: 492

Answers (1)

Chris Forrence
Chris Forrence

Reputation: 10104

You can customize the styling of reCAPTCHA on your own, according to the documentation. To quote directly from the article:

To implement all of this this, first place the following code in your main HTML page anywhere before the element where reCAPTCHA appears:

<script type="text/javascript">
  var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };

Then, inside the element where you want reCAPTCHA to appear, place:

<div id="recaptcha_widget" style="display:none">

  <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

  <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

  <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

  <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

  <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

</div>

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

Upvotes: 2

Related Questions