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

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

– 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

Source link

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu