How To Edit CSS of Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)?

We will guide you edit CSS (re-style) of Google reCAPTCHA on your website. You can change position, language, resize of Google reCAPTCHA v2, v3 badge with some basic CSS codes.

When you install and use Google reCAPTCHA on your website, it may appears overlapped other page elements (submit button, back to top button…). So you may need to change position, language, background, color, responsive, resize…(re-style) of reCAPTCHA to fit with your theme.

Here are some simple CSS codes to help you re-style Google reCAPTHCA v2 and v3 also. You should put these CSS codes in your child theme’s stylesheets.

• Explore more: How To Remove Google reCAPTCHA Logo from Contact Form 7 in WordPress (Hide reCAPTCHA badge)

1. Change position, resize background, color of Google reCAPTCHA v3 badge

If you’re using Google reCAPTCHA v3 on your website then you can try with some CSS codes below to re-style reCAPTCHA badge:

– Change position of Google reCAPTCHA v3 badge by using CSS codes (this may help your Google reCAPTCHA not covered up back to top or share button):

.grecaptcha-badge { 
bottom: 100px !important;
}

– Change background, color of reCAPTCHA logo with this snippet (for example: change it to black color, background – #000):

.rc-anchor-light { 
background: #000 !important; 
color: #000 !important; }

– Using this CSS to resize Google reCAPTCHA badge:

.grecaptcha-badge { 
transform:scale(0.9);
-webkit-transform:scale(0.9); }

If it’s not working for you then you can try this code below:

.grecaptcha-badge,.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

– Responsive your Google reCAPTCHA badge:

@media screen and (max-width: 991px){
.grecaptcha-badge { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); }
}

2. Change background, color, resize of Google reCAPTCHA v2

You can use some CSS to edit Google reCAPTCHA v2 on your website:

– Change background, color of Google reCAPTCHA v2 widget with CSS codes:

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

or

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

– Resize the Google reCAPTCHA v2 widget by using this snippet:

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

– Responsive your Google reCAPTCHA v2:

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

3. Bonus Tip: Change Google reCAPTCHA language

– With Google reCAPTCHA v2 version: you need to specify the parameter ?hl= when adding/loading the Google JavaScript API to change reCAPTCHA language (for example: changing to French language):

<script src=’https://www.google.com/recaptcha/api.js?hl=fr’></script>

– With Google reCAPTCHA v3 version: you can use the script like this:

<script src=’https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key&lang=fr’></script>

– Moreover, you can use a snippet in functions.php file (from directory: /wp-content/themes/your-theme/ ) to change language for Google reCAPTCHA:

add_action( 'wpcf7_enqueue_scripts', 'language_recaptcha_enqueue_scripts', 11 );
function language_recaptcha_enqueue_scripts() {
wp_deregister_script( 'google-recaptcha' );
$url = 'https://www.google.com/recaptcha/api.js';
$url = add_query_arg( array(
'onload' => 'recaptchaCallback',
'render' => 'explicit',
'hl' => 'fr-CA' ), $url );
wp_register_script( 'google-recaptcha', $url, array(), '2.0', true );

Notice: All elements, property of CSS above that’s just for your reference. You can change them by yourself (only using our CSS class selector).