How to target and style Google recaptcha with css?

Question

I'm trying to adjust the length and positioning of my Google recaptcha but if I use the div it doesn't work, if I use the class, it doesn't work.

.anr_captcha_field {width: 100px}

Also tried:

wpcf7-form-control-wrap g- 
recaptcha- 
response {width: 100px}

Html

<span class="wpcf7-form-control- 
wrap your-message"><textarea 
name="your-message" cols="40" 
rows="10" class="wpcf7-form-control 
wpcf7-textarea" aria- 
invalid="false"></textarea></span> 
</label></p>
<p><div class="anr_captcha_field">. 
<div id="anr_captcha_field_1" 
class="anr_captcha_field_div">. 
</div></div><span class="wpcf7- 
form-control-wrap g-recaptcha- 
response"></span></p>
<p><input type="submit" 
value="Send" class="wpcf7-form- 
control wpcf7-submit" /></p>

Page: https://adsler.co.uk/contact-us/

score 0 · Answer 1 · answered May 19 '19 at 18:33

0

By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

Sample :

transform:scale(0.77)

answered May 19 '19 at 18:33

Subin

376
1
4
16

Great. Thanks. And what's the selector please? – May 19 '19 at 18:43

score 0 · Answer 2 · answered May 19 '19 at 19:32

0

Google reCAPTCHA is in iFrame. You need to check how to change the iFrame style. Check: How to apply CSS to iframe?

answered May 19 '19 at 19:32

Rami Sedhom

709
6
15

Thanks. Sounds complicated. How do i know what my i frame name is? – May 19 '19 at 20:42
I can see from your page inspection that iframe name="a-fwjh6e9ycmaf" – Rami Sedhom May 20 '19 at 19:05
If you want to style the width of the whole reCAPTCHA iframe, you can use selector iframe {width:500px;} or better iframe[name="a-fwjh6e9ycmaf"] {width:500px;} – Rami Sedhom May 20 '19 at 19:21
you can apply the css to iframe using these methods but i wont go with these coz u ll be doing lots of hacks/codes for very small customization. its not worth it. – Galzor May 23 '19 at 06:30

score 0 · Accepted Answer · answered May 21 '19 at 06:11

0

i am pretty sure you want to make it round as your other fields, right. try following css, let me know if that works.

#anr_captcha_field_1 {
    width: 310px;
    overflow: hidden;
    border-radius: 20px;
    transform: scale(0.9);
    transform-origin: left top;
    background: #f9f9f9;
}

answered May 21 '19 at 06:11

Galzor

825
8
16

Thanks for that. So it did target it and kinda rounded the edges but looks kinda strange and does nothing for width except extends grey background see here https://adsler.co.uk/contact-us/ wanted to extent the width to fit the width of form but only the grey background extended... – May 22 '19 at 23:39
It also targeted the top left corner border-radius alot but seems other corners not so much... At least it allowed me to move it to the centre of the page so, if you say adjusting width isn't possible without iframe, amd that your css is the limit of what css can do to it, I'll mark correct.... – May 23 '19 at 00:10
1

yes, i didnt target the iframe, as we cant do it in easy and good way. so i thought may using the parent div to make the recaptcha look like the rest of the form. take a look here: https://screenshots.firefox.com/8VWHfFSO2O7d64PN/adsler.co.uk – Galzor May 23 '19 at 06:25
Thanks. There's no actual way then to make the box itself wider, not the grey area behind the box? – May 23 '19 at 10:34
1

nope, not in simple way. it may be possible through some advanced ways but trust me, they are not reliable at all and not worth it. – Galzor May 23 '19 at 13:16
OK. That's obviously as good as it gets then. I'll mark correct since it does target it and do certain things. Thanks for your time in this. Cheers, – May 23 '19 at 14:26

How to target and style Google recaptcha with css?

3 Answers3