Override Google's new reCaptcha to make it responsive

Question

I am struggling to find a way to override google's new recaptcha styling. I believe the new version loads its styling from within the api JS file.

Would anyone know how to override this to make it responsive within bootstrap?

<script src="https://www.google.com/recaptcha/api.js?render=onload"></script>
<div class="g-recaptcha" data-sitekey="key"></div>

score 2 · Answer 1 · answered Apr 06 '15 at 20:16

2

just make the iframe responsive like this

.g-recaptcha{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  }
  .g-recaptcha iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
this will make it res

answered Apr 06 '15 at 20:16

Boukraa Mohamed

21
2

Good and working idea but the captcha has now some overflow problems in some languages with longer text like german. – Hexodus Feb 19 '16 at 18:35

score 2 · Answer 2 · answered Dec 31 '18 at 11:09

2

Use the below mentioned code

.g-recaptcha {transform: scale(0.85); transform-origin: left top;}

answered Dec 31 '18 at 11:09

Surya R Praveen

3,393
1
24
25

score 1 · Answer 3 · answered May 31 '16 at 02:59

1

I would add just one more things to Boukraa Mohamed idea:

.g-recaptcha > iframe

This way it will work even if the iframe down-inside of multiple div tags.

answered May 31 '16 at 02:59

Alex Altotsky

11
1

score 0 · Answer 4 · edited May 23 '17 at 12:22

Your question makes not clear which properties you want to override.

The Google's code loads an iframe in the div with class g-recaptcha. The iframe has its own styles sheets. You can manipulate the style sheets in an iframe with javascript or jQuery, see: How to apply CSS to iframe?.

Before using jQuery to manipulate the style sheets you should make sure that the iframe had loaded. ~~See: https://developers.google.com/recaptcha/docs/display#explicit_render~~ it seems that the api does not provide a function to trigger this onload event.

Override Google's new reCaptcha to make it responsive

4 Answers4