How to change reCAPTCHA colors

From reCAPTCHA Wiki

Jump to: navigation, search
File:Recaptcha default.png
Before: reCAPTCHA with a default theme embedded on a site with a blue layout
File:Recaptcha clear.png
After: Custom colors reCAPTCHA integrated with site's blue layout

Important: this method is not officially supported and may break when new versions of reCAPTCHA system will come out.

For a full list of themes and how to create your own skin for your widget, go here theme

You can apply CSS styles to reCaptcha widget to change its colors and other visual properties. These instructions show you how.


Set the reCaptcha theme to "clean" by adding the following code to your site. The "clean" theme is much more neutral than the default one and much easier to integrate with site's look and feel.

<script>
var RecaptchaOptions = {
   theme : 'clean'
};
</script>

Other option are: red, white, blackglass, clean, custom


Then add the following instructions to your CSS file. Remember to replace #FF0000 with colors of your choice.

 .recaptchatable .recaptcha_image_cell, #recaptcha_table {
   background-color:#FF0000 !important; //reCaptcha widget background color
 }
 
 #recaptcha_table {
   border-color: #FF0000 !important; //reCaptcha widget border color
 }
 
 #recaptcha_response_field {
   border-color: #FF0000 !important; //Text input field border color
   background-color:#FF0000 !important; //Text input field background color
 }


Obviously you can add any other CSS property. Check any CSS tutorial for more information.

Enjoy.

Personal tools