ReCaptcha API v2 Styling

Question

I did not have much success to find how google style new recaptcha (v2). The ultimate goal is to make it responsive, but I am having difficulty applying the style even for simple things like width.

Their API documentation does not contain any details on how to manage a style other than the theme parameter, and simple CSS and JavaScript solutions do not work for me.

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

Answer 1

Overview:

Sorry to be a bad news responder, but after researching and debugging it is pretty clear that there is no way to customize the style of the new reCAPTCHA controls. The controls are wrapped in an iframe , which prevents the use of CSS for their styles, and a policy of the same origin prevents JavaScript from accessing the content, excluding even a hacker solution.

Why is there no customization API ?:

Unlike reCAPTCHA API version 1.0 , there are no settings in API Version 2.0 . If we look at how this new API works, it is not surprising why.

Excerpt from Are You a Robot? Introducing "No CAPTCHA reCAPTCHA" :

While the new reCAPTCHA API may seem simple, there is a high degree of complexity behind this modest flag. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our studies recently showed that today's artificial intelligence technology can solve even the most complex version of distorted text with an accuracy of 99.8%. Thus, garbled text alone is no longer a reliable test.

To counter this, last year we developed the Advanced Risk Analysis backend for reCAPTCHA, which actively examines user interactions with CAPTCHA - before, during, and after - to determine if this user is human. This allows us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our article "Valentine's Day" earlier this year.

If you were able to directly manipulate the style of the controls, you can easily intervene in the user profiling logic that makes the new reCAPTCHA possible.

What is a custom theme ?:

Now the new API offers a theme parameter with which you can select a given theme, for example light and dark . However, there is currently no way to create a custom theme. If we check the iframe , we find the name theme , which will be passed in the query string of the src attribute. This URL looks something like this.

 https://www.google.com/recaptcha/api2/anchor?...&theme=dark&... 

This parameter determines which CSS class name is used in the wrapper element in the iframe and determines the theme used.

Digging into the mini-source, I found that there are actually 4 valid topic values ​​that are greater than 2 specified in the documentation, but default and standard match light .

We can see the code that selects the class name from this object here.

There is no code for a custom theme, and if a different theme value is specified, it will use the standard theme.

In custody:

There is currently no way to fully stylize new reCAPTCHA elements, only shell elements around an iframe stylized. This was almost certainly done intentionally, so that users do not violate the logic of user profiling, which makes possible a new flag without an inscription. Maybe Google can implement a limited user theme API, perhaps letting you select custom colors for existing elements, but I would not expect Google to implement a full CSS style.

Answer 2

As mentioned above, ATM does not exist. but still, if someone is interested, then by adding just two lines, you can at least make it reasonable if it breaks on any screen. you can assign a different value in the @media request.

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

Hope this helps anyone :-).

Answer 3

Unfortunately, we cannot use the reCaptcha v2 style, but we can make it better, here is the code:

Click here to view.

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

Answer 4

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

Contact: google recaptcha docs

Answer 5

What you can do is hide the ReCaptcha control behind the div. Then make your style on this div. And set css "pointer-events: none" for it so that you can click on the div ( Click through the DIV into the base elements ).

The checkbox should be in the place where the user clicks.

Answer 6

You can recreate the recaptcha, wrap it in a container and only leave the checkbox visible. My main problem was that I could not take the full width, so now it expands to the width of the container. The only problem is that you can see the click, but as soon as this happens, I reset it.

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

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

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

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

Answer 7

I use the trick below to make it responsive and remove borders. these tricks can hide recaptcha message / error.

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

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

Answer 8

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

Wrap recaptcha in an extra div:

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

Add styles. This suggests a dark topic.

 // 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 gives the following:

Now it will resize horizontally and will not have borders. The recaptcha logo will be cut off on the right, so I hide it on the right side. It also hides privacy links and terms, so you might want to add them back.

I tried to set the height on the wrapper element and then vertically center the recaptcha to reduce the height. Unfortunately, any overflow combination: hidden and lower heights seem to kill the iframe.

Answer 9

in V2.0 this is not possible. IFrame blocks all styles from this. It's hard to add a custom theme instead of dark or light.

Answer 10

With invisible reCAPTCHA integration, you can do the following:

To enable Invisible reCAPTCHA, instead of placing the parameters in a div, you can add them directly to the html button.

but. callback data = ". This works the same as the captcha flag, but is necessary for the invisible.

b. data-badge: This allows you to reinstall the reCAPTCHA icon (i.e. the logo and 'Protected by reCAPTCHA text). Valid options are "rightright" (default), "Bottomleft" or "inline", which places the icon directly above the button. if you make the icon inline, you can directly control the CSS of the icon.

Answer 11

Fine! Now here is the style for reCaptcha .. I just use the inline style, for example:

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

whatever you do to make a little tweak in the inline style ...

Hope this helps you!

Answer 12

In case someone struggles with repetition of contact form 7 (WordPress), here is the solution 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; } 

Answer 13

Late for the party, but maybe my decision will help someone.

I did not find a solution that works on a high-speed website when changing the viewport or layout.

So, I created a jQuery script for django-cms that dynamically adapts to the changing viewport. I am going to update this answer as soon as I have a need for its modern version, which 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; 

Answer 14

If anyone is still interested, there is a simple javascript library (no jQuery dependency) called custom recaptcha. It allows you to customize the button using css and implement some js events (done / checked). The idea is to make recaptcha invisible by default and put a button on it. Just change the recaptcha id and 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 details.

Answer 15

I just add such a solution / quick fix so that it is not lost in case of a broken link.

The link to this solution "Want to add a link How to resize Google noCAPTCHA reCAPTCHA | The Geek Goddess" was provided by Vikram Singh Saini and simply emphasizes that you can use the built-in CSS to force the creation of an iframe frame.

 // 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> 

Answer 16

You can use CSS for Google reCAPTCHA v2 styles 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 using this snippet:

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

- Your responsive Google reCAPTCHA v2:

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

All elements, CSS properties above, are just for your reference. You can change them yourself (only using the CSS class selector).

See the OIW Blog - How to edit CSS on Google reCAPTCHA (change style, change position, change reCAPTCHA icon size)

You can also find Google reCAPTCHA v3 style there.