Change New Google Recaptcha (v2) Width

Question

We've just started to implement the new google recaptcha as listed https://www.google.com/recaptcha/intro/index.html

However the new method seems to be contained within an iFrame rather than embedded into the page thus making applying CSS more difficult.

However we've got our form which is 400px wide so would like to have the recaptcha the same width.

Currently it looks like, however we'd like it the same with as the rest.

Does anybody know how to do this yet?

Thanks

recaptcha layout example

Please check this solution stackoverflow.com/questions/27713505/recaptcha-api-v2-styling/… — alejandro, Dec 30, 2016 at 1:15

colecmc · Accepted Answer · 2015-07-13 21:31:29Z

130

Here is a work around but not always a great one, depending on how much you scale it. Explanation can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}

UPDATE: Google has added support for a smaller size via a parameter. Have a look at the docs - https://developers.google.com/recaptcha/docs/display#render_param

edited Jul 13, 2015 at 21:31

answered Apr 8, 2015 at 17:58

colecmc

3,2483 gold badges21 silver badges34 bronze badges

4

data-size="compact" does not works as compactly for me. Guess we will stick to the scaling with transform
– Burak Tokak
Jul 28, 2015 at 11:04
2

When apply this trick noscript extension gives me a warning on click that the captcha is being blocked
– HasanG
Dec 13, 2015 at 23:24
Do you have a link to the extension?
– colecmc
Dec 14, 2015 at 22:31
1

it works great, but it disables my submit button just below :(
– kabrice
Jan 8, 2017 at 22:07
1

It seems odd that changing the width of a 3rd party component (google recaptcha) would alter the functionality of your form submit button.
– colecmc
Jan 9, 2017 at 17:01

| Show 2 more comments

Luca Steeb · Accepted Answer · 2015-04-08 12:14:36Z

18

No, currently you can not. It was only possible with the old recaptcha, but I'm sure you will be able to do that in the future.

I have no solution but a suggestion. I had the same problem, so I centered the recaptcha div (margin: 0 auto;display: table), I think it looks much better than a left-aligned div.

edited Apr 8, 2015 at 12:14

answered Jan 12, 2015 at 16:55

Luca Steeb

1,8404 gold badges24 silver badges45 bronze badges

1

Many thanks @Luca Steeb it's work perfect like charm thanks again :)
– kuldip Makadiya
Jan 11, 2017 at 12:15

Add a comment |

k1r8r0wn · Accepted Answer · 2015-06-08 10:10:19Z

16

For more compatibility:

  -webkit-transform: scale(0.77);
     -moz-transform: scale(0.77);
      -ms-transform: scale(0.77);
       -o-transform: scale(0.77);
          transform: scale(0.77);
   -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
           transform-origin: 0 0;

answered Jun 8, 2015 at 10:10

k1r8r0wn

8009 silver badges21 bronze badges

3

You may not need it: many browsers can understand the non-prefixed version and others never implemented the prefixed one. If you're going to support browsers with use prefixes use a tool for this. Your example when processed in AutoPrefixer don't have either -moz- or -o- as those aren't needed.
– Gustavo Rodrigues
Sep 5, 2015 at 16:51

Add a comment |

Mayank Dudakiya · Accepted Answer · 2020-06-07 04:01:39Z

I have found following best ways to resize google recaptchas

Option 1: You can resize google ReCaptcha by using inline style.

A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.

<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>

Option 2: By putting the following style in your page (Internal Style Sheet).

Secondly, you can put style for ReCaptcha into the page between and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Option 3: Resize google ReCaptcha by using an external stylesheet.

Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Reference from the blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

I modified it a bit for my case but it worked like a charm, I made a custom class for the recaptcha div and put it on the css file. But inline works as well for development, thanks — Ricardo Rivera Nieves, Jun 21, 2020 at 3:52
It's working but what about the challenge window? it's still the same size. — Syed Waqas Bukhary, Aug 24, 2022 at 14:28

Andrew Rockwell · Accepted Answer · 2015-04-01 00:39:12Z

10

A bit late but I've got an easy workaround:

Just add this code to your "g-recaptcha" class:

width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;

answered Apr 1, 2015 at 0:39

Andrew Rockwell

4446 silver badges15 bronze badges

5

This works quite well. I think it may be against the terms/conditions to hide the recaptcha logo with the hidden overflow though. I hope they offer better customisation options in the near future.
– contrid
Apr 1, 2015 at 8:44
It was helpful and so simple. Thanks.
– Rolen Koh
May 27, 2016 at 7:26

Add a comment |

Muntasim · Accepted Answer · 2015-08-21 03:20:10Z

7

For the new version of noCaptcha Recaptcha the following works for me:

<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>

Ref

answered Aug 21, 2015 at 3:20

Muntasim

6,7273 gold badges47 silver badges69 bronze badges

Add a comment |

Ajean · Accepted Answer · 2016-09-13 19:56:52Z

I have this function in the document ready event so that the reCaptcha is dynamically sized. Anyone should be able to drop this in place and go.

function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
         childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
         scale = (parentWidth) / (childWidth);
         new_width = childWidth * scale;
         document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
         document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
     }
}

Uncaught TypeError: Cannot read property 'clientWidth' of null — apis17, Nov 16, 2016 at 7:04

KirtJ · Accepted Answer · 2019-04-02 17:43:02Z

5

You can use parameter from reCaptcha. By default it uses normal value on data-size, You just have to use compact to fit this on small devices or some-kind small width layouts.

example:

<div class="g-recaptcha" data-size="compact"></div>

answered Apr 2, 2019 at 17:43

KirtJ

5667 silver badges8 bronze badges

Add a comment |

A.K. · Accepted Answer · 2016-04-21 12:43:22Z

4

.g-recaptcha{
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    -moz-transform-origin:0; 
    -ms-transform-origin:0;
    -o-transform-origin:0;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transform-origin:0 0;
    transform-origin:0;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}

answered Apr 21, 2016 at 12:43

A.K.

2,3043 gold badges28 silver badges36 bronze badges

Works, but its not responsive :(
– Rick Kukiela
Feb 9, 2017 at 17:31
@SublymeRick Use media queries and change all the transform: scale()
– mateostabio
Mar 15, 2018 at 15:47

Add a comment |

Kevin Lau · Accepted Answer · 2017-08-25 07:56:34Z

This is my work around:

1) Add a wrapper div to the recaptcha div.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Add javascript/jquery code.

$(function(){
    // global variables
    captchaResized = false;
    captchaWidth = 304;
    captchaHeight = 78;
    captchaWrapper = $('#recaptcha-wrapper');
    captchaElements = $('#rc-imageselect, .g-recaptcha');

    resizeCaptcha();
    $(window).on('resize', function() {
        resizeCaptcha();
    });
});

function resizeCaptcha() {
    if (captchaWrapper.width() >= captchaWidth) {
        if (captchaResized) {
            captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', '');
            captchaWrapper.height(captchaHeight);
            captchaResized = false;
        }
    } else {
        var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
        captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0');
        captchaWrapper.height(captchaHeight * scale);
        if (captchaResized == false) captchaResized = true;
    }
}

3) Optional: add some styling if needed.

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }

PurTahan · Accepted Answer · 2018-03-08 14:09:39Z

3

Now, You can use below code (by google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

answered Mar 8, 2018 at 14:09

PurTahan

92310 silver badges24 bronze badges

Add a comment |

Mr. Engineer · Accepted Answer · 2019-09-25 05:39:59Z

It's been late, but just want to help others if still facing an issue. I found nice JS solution here : https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Here is JavaScript code using jQuery to do so:

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 302) {
        var scale = width / 302;
        $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('transform-origin', '0 0');
        $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
    }
});

IMP Note : It will support All Devices, above and bellow 320px width as well.

Khalid ELABBADI · Accepted Answer · 2020-05-24 15:38:55Z

unfortunately none of the above worked. I finally could do it using the following stuffs: This solution works 100% (adapt it to your need)

.g-recaptcha-wrapper {
    position: relative;
    border: 1px solid #ededed;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 0;
    #topHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
    #rightHider {
        position: absolute;
        top: 0;
        left: 295px;
        height: 100% !important;
        width: 15px;
        background-color: #f9f9f9;
    }
    #leftHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        width: 2px;
        background-color: #f9f9f9;
    }
    #bottomHider {
        position: absolute;
        bottom: 1px;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
}

<div class="g-recaptcha-wrapper">
  <re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
  <div id="topHider"></div>
  <div id="rightHider"></div>
  <div id="bottomHider"></div>
  <div id="leftHider"></div>
</div>

Result

Thanks. It works and serves the purpose.
– Nimesh
Feb 15 at 18:09 — Nimesh, Feb 15 at 18:09

Syed Waqas Bukhary · Accepted Answer · 2022-08-25 11:47:53Z

0

Class .g-recaptcha is not scaling the challenge popup. Google does not assign class to the parent of the iframe div. Hence targeting the general div with child iframe will work for both recaptcha and the challenge popup.

div iframe {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}

It will scale other iframes on the page as well therefore only use this if you don't have any other iframes.

answered Aug 25, 2022 at 11:47

Syed Waqas Bukhary

5,2405 gold badges47 silver badges61 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Change New Google Recaptcha (v2) Width

14 Answers 14

Your Answer

Not the answer you're looking for? Browse other questions tagged
css
iframe
width
recaptcha
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged cssiframewidthrecaptcha or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
iframe
width
recaptcha
or ask your own question.