[javascript] ReCaptcha API v2 Styling

I have not had much success finding how to style Google's new recaptcha (v2). The eventual goal is to make it responsive, but I am having difficulty applying styling for even simple things like width.

Their API documentation does not appear to give any specifics on how to control styling at all other than the theme parameter, and simple CSS & JavaScript solutions haven't worked for me.

Basically, I need to be able to apply CSS to Google's new version of reCaptcha. Using JavaScript with it is acceptable.

You can also choose between a dark or light ReCaptcha theme. I used this in one of my Angular 8 Apps

Just adding a hack-ish solution to make it responsive.

Wrap the recaptcha in an extra div:

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Add styles. This assumes the dark theme.

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

This yields the following:

It will now resize horizontally, and doesn't have a border. The recaptcha logo would get cut off on the right, so I am hiding it with a border-right. It's also hiding the privacy and terms links, so you may want to add those back in.

I attempted to set a height on the wrapper element, and then vertically center the recaptcha to reduce the height. Unfortunately, any combo of overflow:hidden and a smaller height seems to kill the iframe.

I use below trick to make it responsive and remove borders. this tricks maybe hide recaptcha message/error.

This style is for rtl lang but you can change it easy.

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Late to the party, but maybe my solution will help somebody.

I haven't found any solution that works on a responsive website when the viewport changes or the layout is fluid.

So I've created a jQuery script for django-cms that is dynamically adapting to a changing viewport. I'm going to update this response as soon as I have the need for a modern variant of it that is more modular and has no jQuery dependency.

html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 

css

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-origin: top left;
}

js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;

I came across this answer trying to style the ReCaptcha v2 for a site that has a light and a dark mode. Played around some more and discovered that besides transform, filter is also applied to iframe elements so ended up using the default/light ReCaptcha and doing this when the user is in dark mode:

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

The hue-rotate(180deg) makes it so that the logo is still blue and the check-mark is still green when the user clicks it, while keeping white invert()'ed to black and vice versa.

Didn't see this in any answer or comment so decided to share even if this is an old thread.

With the integration of the invisible reCAPTCHA you can do the following:

To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.

a. data-callback=””. This works just like the checkbox captcha, but is required for invisible.

b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and ‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default), ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you make the badge inline, you can control the CSS of the badge directly.

Great! Now here is styling available for reCaptcha.. I just use inline styling like:

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

whatever you wanna to do small customize in inline styling...

Hope it will help you!!

If someone is still interested, there is a simple javascript library (no jQuery dependency), named custom recaptcha. It lets you customize the button with css and implement some js events (ready/checked). The idea is to make the default recaptcha "invisible" and put a button over it. Just change the id of the recaptcha and that's it.

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

See https://azentreprise.org/read.php?id=1 for more information.

In case someone struggling with the recaptcha of contact form 7 (wordpress) here is a solution working for me

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

What you can do is to hide the ReCaptcha Control behind a div. Then make your styling on this div. And set the css "pointer-events: none" on it, so you can click through the div (Click through a DIV to underlying elements).

The checkbox should be in a place where the user is clicking.

You can use some CSS for Google reCAPTCHA v2 styling on your website:

– Change background, color of Google reCAPTCHA v2 widget:

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

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

Refer on OIW Blog - How To Edit CSS of Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)

You can also find out Google reCAPTCHA v3's styling there.

A bit late but I tried this and it worked to make the Recaptcha responsive on screens smaller than 460px width. You can't use css selector to select elements inside the iframe. So, better use the outermost parent element which is the class g-recaptcha to basically zoom-out i.e transform the size of the entire container. Here's my code which worked:

@media(max-width:459.99px) {
    .modal .g-recaptcha {
        transform:scale(0.75);
        -webkit-transform:scale(0.75); }
    }
}

in the V2.0 it's not possible. The iframe blocks all styling out of this. It's difficult to add a custom theme instead of the dark or light one.

Unfortunately we cant style reCaptcha v2, but it is possible to make it look better, here is the code:

Click here to preview

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

As guys mentioned above, there is no way ATM. but still if anyone interested, then by adding in just two lines you can at least make it look reasonable, if it break on any screen. you can assign different value in @media query.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Hope this helps anyone :-).

I am just adding this kind of solution / quick fix so it won't get lost in case of a broken link.

Link to this solution "Want to add link How to resize the Google noCAPTCHA reCAPTCHA | The Geek Goddess" was provided by Vikram Singh Saini and simply outlines that you could use inline CSS to enforce framing of the iframe.

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-origin:0 0;
  -webkit-transform-origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
</style>

You can recreate recaptcha , wrap it in a container and only let the checkbox visible. My main problem was that I couldn't take the full width so now it expands to the container width. The only problem is the expiration you can see a flick but as soon it happens I reset it.

See this demo http://codepen.io/alejandrolechuga/pen/YpmOJX

function recaptchaReady () {_x000D_
  grecaptcha.render('myrecaptcha', {_x000D_
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',_x000D_
  'expired-callback': function () {_x000D_
    grecaptcha.reset();_x000D_
    console.log('recatpcha');_x000D_
  }_x000D_
});_x000D_
}

.recaptcha-wrapper {_x000D_
    height: 70px;_x000D_
  overflow: hidden;_x000D_
  background-color: #F9F9F9;_x000D_
  border-radius: 3px;_x000D_
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);_x000D_
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);_x000D_
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);_x000D_
  height: 70px;_x000D_
  position: relative;_x000D_
  margin-top: 17px;_x000D_
  border: 1px solid #d3d3d3;_x000D_
  color: #000;_x000D_
}_x000D_
_x000D_
.recaptcha-info {_x000D_
  background-size: 32px;_x000D_
  height: 32px;_x000D_
  margin: 0 13px 0 13px;_x000D_
  position: absolute;_x000D_
  right: 8px;_x000D_
  top: 9px;_x000D_
  width: 32px;_x000D_
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);_x000D_
  background-repeat: no-repeat;_x000D_
}_x000D_
.rc-anchor-logo-text {_x000D_
  color: #9b9b9b;_x000D_
  cursor: default;_x000D_
  font-family: Roboto,helvetica,arial,sans-serif;_x000D_
  font-size: 10px;_x000D_
  font-weight: 400;_x000D_
  line-height: 10px;_x000D_
  margin-top: 5px;_x000D_
  text-align: center;_x000D_
  position: absolute;_x000D_
  right: 10px;_x000D_
  top: 37px;_x000D_
}_x000D_
.rc-anchor-checkbox-label {_x000D_
  font-family: Roboto,helvetica,arial,sans-serif;_x000D_
  font-size: 14px;_x000D_
  font-weight: 400;_x000D_
  line-height: 17px;_x000D_
  left: 50px;_x000D_
  top: 26px;_x000D_
  position: absolute;_x000D_
  color: black;_x000D_
}_x000D_
.rc-anchor .rc-anchor-normal .rc-anchor-light {_x000D_
  border: none;_x000D_
}_x000D_
.rc-anchor-pt {_x000D_
  color: #9b9b9b;_x000D_
  font-family: Roboto,helvetica,arial,sans-serif;_x000D_
  font-size: 8px;_x000D_
  font-weight: 400;_x000D_
  right: 10px;_x000D_
  top: 53px;_x000D_
  position: absolute;_x000D_
  a:link {_x000D_
    color: #9b9b9b;_x000D_
    text-decoration: none;_x000D_
  }_x000D_
}_x000D_
_x000D_
g-recaptcha {_x000D_
  // transform:scale(0.95);_x000D_
  // -webkit-transform:scale(0.95);_x000D_
  // transform-origin:0 0;_x000D_
  // -webkit-transform-origin:0 0;_x000D_
_x000D_
}_x000D_
_x000D_
.g-recaptcha {_x000D_
  width: 41px;_x000D_
_x000D_
  /* border: 1px solid red; */_x000D_
  height: 38px;_x000D_
  overflow: hidden;_x000D_
  float: left;_x000D_
  margin-top: 16px;_x000D_
  margin-left: 6px;_x000D_
  _x000D_
    > div {_x000D_
    width: 46px;_x000D_
    height: 30px;_x000D_
    background-color:  #F9F9F9;_x000D_
    overflow: hidden;_x000D_
    border: 1px solid red;_x000D_
    transform: translate3d(-8px, -19px, 0px);_x000D_
  }_x000D_
  div {_x000D_
    border: 0;_x000D_
  }_x000D_
}

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>_x000D_
_x000D_
<div class="recaptcha-wrapper">_x000D_
  <div id="myrecaptcha" class="g-recaptcha"></div>_x000D_
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>_x000D_
        <div class="recaptcha-info"></div>_x000D_
        <div class="rc-anchor-logo-text">reCAPTCHA</div>_x000D_
        <div class="rc-anchor-pt">_x000D_
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>_x000D_
          <span aria-hidden="true" role="presentation"> - </span>_x000D_
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>_x000D_
        </div>_x000D_
</div>

Add a data-size property to the google recaptcha element and make it equal to "compact" in case of mobile.

Refer: google recaptcha docs