ReCaptcha API v2 Styling

Question

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

User · Answer

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

User · Answer

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

User · Answer

Overview  Sorry to be the answerer of bad news  but after research and debugging  it s pretty clear that there is no way to customize the styling of the new reCAPTCHA controls  The controls are wrapped in an iframe  which prevents the use of CSS to style them  and Same-Origin Policy prevents JavaScript from accessing the contents  ruling out even a hacky solution  Why No Customize API   Unlike reCAPTCHA API Version 1 0  there are no customize options in API Version 2 0  If we consider how this new API works  it s no surprise why  Excerpt from Are you a robot  Introducing    No CAPTCHA reCAPTCHA      While the new reCAPTCHA API may sound simple  there is a high degree of sophistication behind that modest checkbox  CAPTCHAs have long relied on the inability of robots to solve distorted text  However  our research recently showed that today   s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99 8  accuracy  Thus distorted text  on its own  is no longer a dependable test  To counter this  last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user   s entire engagement with the CAPTCHA   before  during  and after   to determine whether that user is a human  This enables us to rely less on typing distorted text and  in turn  offer a better experience for users   We talked about this in our Valentine   s Day post earlier this year   If you were able to directly manipulate the styling of the control elements  you could easily interfere with the user-profiling logic that makes the new reCAPTCHA possible  What About a Custom Theme   Now the new API does offer a theme option  by which you can choose a preset theme such as light and dark  However there is not presently a way to create a custom theme  If we inspect the iframe  we will find the theme name is passed in the query string of the src attribute  This URL looks something like the following  https   www google com recaptcha api2 anchor     amp theme dark amp      This parameter determines what CSS class name is used on the wrapper element in the iframe and determines the preset theme to use   Digging through the minified source  I found that there are actually 4 valid theme values  which is more than the 2 listed in the documentation  but default and standard are the same as 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 any other theme value is specified  it will use the standard theme  In Conclusion  At present  there is no way to fully style the new reCAPTCHA elements  only the wrapper elements around the iframe can be stylized  This was almost-certainly done intentionally  to prevent users from breaking the user profiling logic that makes the new captcha-free checkbox possible  It is possible that Google could implement a limited custom theme API  perhaps allowing you to choose custom colors for existing elements  but I would not expect Google to implement full CSS styling

User · Answer

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     x000D   x000D  function recaptchaReady      x000D    grecaptcha render  myrecaptcha     x000D     sitekey    6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj   x000D     expired-callback   function      x000D      grecaptcha reset    x000D      console log  recatpcha    x000D      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       gt  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    x000D   lt script src  https   www google com recaptcha api js onload recaptchaReady amp  amp render explicit  gt  lt  script gt  x000D   x000D   lt div class  recaptcha-wrapper  gt  x000D     lt div id  myrecaptcha  class  g-recaptcha  gt  lt  div gt  x000D             lt div class  rc-anchor-checkbox-label  gt I m not a Robot  lt  div gt  x000D           lt div class  recaptcha-info  gt  lt  div gt  x000D           lt div class  rc-anchor-logo-text  gt reCAPTCHA lt  div gt  x000D           lt div class  rc-anchor-pt  gt  x000D             lt a href  https   www google com intl en policies privacy   target   blank  gt Privacy lt  a gt  x000D             lt span aria-hidden  true  role  presentation  gt  -  lt  span gt  x000D             lt a href  https   www google com intl en policies terms   target   blank  gt Terms lt  a gt  x000D           lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt div id  recaptchaContainer  style  transform scale 0 8  transform-origin 0 0  gt  lt  div gt    Hope this helps anyone  -

User · Answer

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

User · Answer

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      lt div class  g-recaptcha-outer  gt       lt div class  g-recaptcha-inner  gt           lt div class  g-recaptcha  data-size  compact  data-sitekey  YOUR KEY  gt  lt  div gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

Just adding a hack-ish solution to make it responsive   Wrap the recaptcha in an extra div    lt div class  recaptcha-wrap  gt                          lt div id  g-recaptcha  gt  lt  div gt   lt  div gt    Add styles  This assumes the dark theme      Recaptcha  recaptcha-wrap       position  relative      height  76px      padding 1px 0 0 1px      background  222       gt  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  amp  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

User · Answer

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   lt div class  g-recaptcha  data-sitekey   site key   data-size  size  gt    lt  div gt      css    g-recaptcha   display  none      g-recaptcha g-recaptcha-initted        display  block       overflow  hidden       g-recaptcha g-recaptcha-initted  gt          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   gt      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

User · Answer

Great  Now here is styling available for reCaptcha   I just use inline styling like     lt div class  g-recaptcha  data-sitekey  XXXXXXXXXXXXXXX  style  transform  scale 1 08   margin-left  14px   gt  lt  div gt     whatever you wanna to do small customize in inline styling     Hope it will help you

User · Answer

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

User · Answer

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

User · Answer

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   lt 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      gt   lt  div gt       Scale the images using a stylesheet  lt style gt   rc-imageselect   g-recaptcha     transform scale 0 77     -webkit-transform scale 0 77     transform-origin 0 0    -webkit-transform-origin 0 0     lt  style gt

User · Answer

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  gt          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       lt div class  g-recaptcha  data-sitekey  Your Api Key  gt  lt  div gt   lt script src  https   www google com recaptcha api js hl fa  gt  lt  script gt

User · Answer

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

User · Answer

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    lt head gt       lt script src  https   azentreprise org download custom-recaptcha min js  gt  lt  script gt       lt style type  text css  gt           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                 lt  style gt   lt  head gt   lt body gt       lt div id  captcha  data-sitekey  your site key  data-label  Click here  data-label-spacing  15  gt  lt  div gt   lt  body gt    See https   azentreprise org read php id 1 for more information

User · Answer

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

[javascript] ReCaptcha API v2 Styling

Examples related to javascript

Examples related to css

Examples related to captcha

Examples related to recaptcha