Recaptcha Fixed Image Size

Question

Why is the recaptcha image fixed at 300x57? Even when setting up the div where the image is entered, the width and height of the div are overridden and set to 300x57. Of course, an image can be resized after rendering it, but why is it not possible to generate an image that size developers would like it to be.

http://code.google.com/apis/recaptcha/docs/customization.html

reCAPTCHA will rely on the presence of HTML elements with the following identifiers to display CAPTCHA to the user: an empty div with the identifier recaptcha_image. The actual image will be posted here. The div size will be 300x57 pixels.

thanks

Answer 1

#recaptcha_image img { width: 200px !important; height: 38px !important; } 

Answer 2

You can override the inline css add! important behind the CSS rule, even in an external file.

Answer 3

Full customization with css, demo

 <form method="POST" action=""> <script type="text/javascript"> var RecaptchaOptions = { tabindex: 1, theme: 'custom', custom_theme_widget: 'recaptcha_widget' }; </script> <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">Type what you hear:</span> <input type="text" id="recaptcha_response_field" name="recaptcha_response_field"> <div class="get_another_captcha"><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div> <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type(&#39;audio&#39;)">Get an audio CAPTCHA</a></div> <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type(&#39;image&#39;)">Get an image CAPTCHA</a></div> <div><a href="javascript:Recaptcha.showhelp()">Help</a></div> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=YourAPI"></script> <noscript><iframe src="http://www.google.com/recaptcha/api/noscript?k=YourAPI" 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></div> <script type="text/javascript"> window.onload = function() { Recaptcha.focus_response_field(); } </script> <table cellspacing="0" cellpadding="4" border="0" style="font-family: Helvetica, sans-serif; color: #000000; font-size: 12px;"><tr><td><div><input type="submit" name="Button1" value="Submit"></div></td></tr></table></form> 

Answer 4

Solution working with the new Google Recaptcha ( https://www.google.com/recaptcha/ )

 <!--adjust to your needs --> <div class="g-recaptcha" data-sitekey="your_sitekey" style="transform:scale(.8); margin:0 -30px"> 

Answer 5

This worked for me and effectively changed the width of the entire control, not just the internal image

  #recaptcha_area { width: 250px !important; height: 38px !important; } 

Answer 6

For the new version of noCaptcha Recaptcha, the following works for me:

 <div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0;-webkit-transform:scale(0.77); transform:scale(0.77);-webkit-transform-origin:0;transform-origin:0 0;"></div> 

If you only scale, it takes the original size of the div. But the above solution fixes the gap problem.

Link