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

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

We will guide you edit CSS (re-style) of Google reCAPTCHA on your website. You can change position, 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, 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.

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); }

– 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; }

Google reCAPTCHA v2 background changed

– 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); } 
}

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

If you need some different CSS code for your Google reCAPTCHA please let us know in the comment form below


Post a Comment

avatar
  Subscribe  
Notify of
Stablehost Coupons - Best Hosting in 2018 Register a Domain Name on Namesilo


Categories