Overriding google recaptcha css to make it responsive

Question

I installed Google Recaptcha in a site (not a Wordpress site or Joomla) So do not offer any WP plugins or Joomla Extension :)

My problem is, the site is responsive and recaptcha is not. When I use Firebug to find its styles I realized that not only the library that Google provides does not contain the css files, and I can't override them in my custom-styles.css file because Google, very thoughtfully, applied the !important selector hack to EVERYTHING in their css, but I even tried classing it so that I can make a breach and hopefully override Google's styles but then the plugin doesn't work:(

Any ideas?

p.s. I am not using a different re-captcha either. Sorry. I'm sure there are some recaptcha geeks out here ;)

Here is the HTML. This is what the recaptcha.php renders from the server. THIS IS NOT WHAT i I HAVE IN THE ACTUAL PHP PAGE...(Don't have a CSS, and that is the main problem)

<div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha_theme_red"> 
  <tbody>
     <tr> 
        <td colspan="6" class="recaptcha_r1_c1"></td> 
     </tr> 
     <tr> 
        <td class="recaptcha_r2_c1"></td> 
        <td colspan="4" class="recaptcha_image_cell">
            <center><div id="recaptcha_image" style="width: 300px; height: 57px;">
                  <img id="recaptcha_challenge_image" alt="reCAPTCHA challenge image" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></div>
            </center>
         </td> 
         <td class="recaptcha_r2_c2"></td> 
      </tr> 
      <tr> 
         <td rowspan="6" class="recaptcha_r3_c1"></td> 
         <td colspan="4" class="recaptcha_r3_c2"></td> 
         <td rowspan="6" class="recaptcha_r3_c3"></td> 
      </tr> 
      <tr> 
         <td rowspan="3" class="recaptcha_r4_c1" height="49"> 
              <div class="recaptcha_input_area"> 
                  <span id="recaptcha_challenge_field_holder" style="display: none;">                      
                      <input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></span>
                      <input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="Type the text" autocomplete="off" style="font-style: italic;"> 
                           <span id="recaptcha_privacy" class="recaptcha_only_if_privacy"><a href="http://www.google.com/intl/en/policies/" target="_blank">Privacy &amp; Terms</a></span> 
              </div> 
          </td> 
          <td rowspan="4" class="recaptcha_r4_c2"></td> 
          <td><a id="recaptcha_reload_btn" title="Get a new challenge">
              <img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="Get a new challenge"></a></td> 
          <td rowspan="4" class="recaptcha_r4_c4"></td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge">
               <img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="http://www.google.com/recaptcha/api/img/red/audio.gif"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge">
               <img id="recaptcha_switch_img" width="25" height="16" alt="Get a visual challenge" src="http://www.google.com/recaptcha/api/img/red/text.gif"></a>
          </td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_whatsthis_btn" title="Help">
               <img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="Help"></a>
          </td> 
      </tr> 
      <tr> 
          <td class="recaptcha_r7_c1"></td> <td class="recaptcha_r8_c1"></td> 
      </tr> 
  </tbody>
 </table> 
</div> 
</div>

This is what I do have in the page

  require_once('recaptchalib.php');
  $publickey = "your_public_key"; // you got this from the signup page
  echo recaptcha_get_html($publickey);

And here is my problem

Distal

Answer 1

Changed auto height and media query

@media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

}

Underlying

Answer 2

For reCAPTCHA (requires jQuery):

$(function(){
  function rescaleCaptcha(){
    var width = $('.g-recaptcha').parent().width();
    var scale;
    if (width < 302) {
      scale = width / 302;
    } else{
      scale = 1.0; 
    }

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

  rescaleCaptcha();
  $( window ).resize(function() { rescaleCaptcha(); });

});

This basically checks your browser width and depends the scale it should be transformed too. Best solution around at this point.

Screenshots result (full width, smaller width, smallest width):

Dowland

This prevents it displaying in several browsers: Chrome, Brave, Safari, etc. Test before you post. – Equilibrium

Works in every modern browser. Test before you post ;) – Dowland

I should have said that DNN was in the mix ;-) – Equilibrium

Answer 3

In my case I decreased the scale of it and I force some horizontal alignment on center through Bootstrap 4 grid system. Click here to see the result.

Code:

<div class="row justify-content-center">
     <div class="col g-recaptcha" data-sitekey="check_reCaptcha_doc_to_set_this" style="width: 304px !important; max-width: 304px !important; -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); margin: 0px; padding: 0px;">
     </div>
</div>

Hegira

Answer 4

This is my solution with media queries. I use scale to scale it down to a reasonable size for mobile.

A simple and effective solution:

@media (max-width:575px) {
    #rc-imageselect, .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
        margin-bottom: -20px;
    }
}

Irritable

Answer 5

Google has complete documentation on how to style recaptcha forms here:

https://developers.google.com/recaptcha/docs/display

and you can completely override the html/css they provide with your own.

Erigeron

This is no longer true, Google Recaptcha 2.0 actually does not allow theme customization: https://mcmap.net/q/180365/-recaptcha-api-v2-styling – Toft

Answer 6

You may want to add some CSS styling but we opted for removing everything that wasn't necessary.

Add this code to your css file :

@media (min-width: 320px) and (max-width: 480px) {
        #recaptcha_challenge_image{
        margin: 0 !important;
        width: 100% !important;
        }
        #recaptcha_response_field
        {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable .recaptcha_r1_c1, 
        .recaptchatable .recaptcha_r3_c1, 
        .recaptchatable .recaptcha_r3_c2, 
        .recaptchatable .recaptcha_r7_c1, 
        .recaptchatable .recaptcha_r8_c1, 
        .recaptchatable .recaptcha_r3_c3, 
        .recaptchatable .recaptcha_r2_c1, 
        .recaptchatable .recaptcha_r4_c1, 
        .recaptchatable .recaptcha_r4_c2, 
        .recaptchatable .recaptcha_r4_c4, 
        .recaptchatable .recaptcha_image_cell {

        margin: 0 !important;
        width: 100% !important;
        background: none !important;
        }

    }

Munt

Answer 7

Try this one. Google responsive reCAPTCHA

Parabola

Answer 8

The best way is that you use the google recaptcha and use this css code to make responsive,

#rc-imageselect, .g-recaptcha {
   display: inline; //the most important
}

#rc-imageselect{
   max-width: 100%;
}

.g-recaptcha>div>div{
   width: 100% !important;
   height: 78px;
   transform:scale(0.77); //the code to rescale the captcha obtained in this page
   webkit-transform:scale(0.77);
   text-align: center;
   position: relative;
}

Clarion

Answer 9

You can simply add some transform style for the specific device you needed:

 @media only screen and (max-width : 767px)     {

 #rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }
}

Feral

Answer 10

Here is the best workaround I have found in 2017/2018 :

.g-recaptcha > div {
    width: 100% !important;
}

.g-recaptcha iframe {
    width: 100% !important;
}

Hendel

Indeed works just as well as the accepted answer. – Urnfield

Answer 11

Simple you have to copy style attribute from below code to your code then your problem will solved.

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

For more details open this Link

Renowned

Answer 12

try this for answer part:

@media only screen and (max-width:480px) {
iframe > ::after, ::before{
    position: relative;
    width: 100% !important;
    left: 0 !important;
    right:0 !important;
}

}

and this to checkbox part(note that recaptchaDiv is id of your added captcha container div) :

#recaptchaDiv {
    width: 100%;
    position: relative;
    left: 0;
}

.g-recaptcha > div {
    width: 100% !important;
    position: relative;
    left: 0;
    top: -1px;
}

    .g-recaptcha > div > div {
        width: 100% !important;
        transform: scale(0.73);
        text-align: center;
        position: relative;
        left: 0;
        top: -1px;
    }

Dustydusza

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Julee

Answer 13

Building off Jan's answer and Siraj Khan's answer, I added some more styling to format the buttons on the right side that allow you to refresh the image, play out loud, learn more, and read privacy & terms easier.

@media only screen and (max-width : 480px) {
  #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
  }
  #recaptcha_response_field {
    margin: 0 !important;
    width: 100% !important;
  }
  .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 95% !important;
  }
  .recaptchatable .recaptcha_r1_c1,
  .recaptchatable .recaptcha_r3_c1,
  .recaptchatable .recaptcha_r3_c2,
  .recaptchatable .recaptcha_r7_c1,
  .recaptchatable .recaptcha_r8_c1,
  .recaptchatable .recaptcha_r3_c3,
  .recaptchatable .recaptcha_r2_c1,
  .recaptchatable .recaptcha_r4_c1,
  .recaptchatable .recaptcha_r4_c2,
  .recaptchatable .recaptcha_r4_c4,
  .recaptchatable .recaptcha_image_cell {
    margin: 0 !important;
    width: 100% !important;
    background: none !important;
  }
  #recaptcha_table tbody tr td {
    padding: 0 !important;
    width: 75px;
  }
  .recaptchatable .recaptcha_image_cell {
    padding-right: 0 !important;
  }
  #recaptcha_privacy a {
    line-height: 1.2em;
  }
  span#recaptcha_privacy {
    width: 50px;
  }
}

Avian

Answer 14

may be this could help you use transform on your main div where u call recaptcha

transform: scale(0.75);
transform-origin: left top;

Woodsman

Answer 15

Good night, I created this code in jquery, hope it helps, you can modify the values

<script>
  
  $(window).resize(function(){

var widthInput = $('input').width()



const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total


$('.gc-recaptcha').css('transform','scale('+total+')');

  });

  $(document).ready(function(){
    var widthInput = $('input').width()



const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total




$('.gc-recaptcha').css('transform','scale('+total+')'); 
  })

//   transform:scale(1.26) !important;

  </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

just need to organize`

  <div class="container">
  <form>

  
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="g-recaptcha" data-sitekey="|*SEU-SITE-KEY*|"></div>
  </div>

.gc-recaptcha {


transform-origin:0 0 !important;

}

`

Crazyweed

add your code <script src='google.com/recaptcha/api.js'></script> – Crazyweed

Answer 16

Good night, I created this code in jquery, hope it helps, you can modify the values

<script>
  
  $(window).resize(function(){

var widthInput = $('input').width()



const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total

var teste = widthInput <= 664 ? "Sim" : "nao";
console.log(total);


$('.gc-reset').css('transform','scale('+total+')');

  });

  $(document).ready(function(){
    var widthInput = $('input').width()



const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total

var teste = widthInput <= 664 ? "Sim" : "nao";
console.log(total);


$('.gc-reset').css('transform','scale('+total+')'); 
  })

//   transform:scale(1.26) !important;

  </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

just need to organize

Crazyweed

You should add more explanation on how to use your code. Plus, this assume OP can/want to run JQuery. A pure CSS solution in this case would probably be more appropriate. – Backdrop