如何使用 css 定位和设计 Google 重新验证码？

Question

我正在尝试调整我的 Google 验证码的长度和位置，但是如果我使用 div 它不起作用，如果我使用 class，它不起作用。

.anr_captcha_field {width: 100px}

也尝试过：

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>

页数：https://adsler.co.uk/contact-us/

Answer 1

通过使用 CSS 转换属性，您可以通过更改 reCAPTCHA 的整个比例来实现更改宽度。

样本：

变换：缩放（0.77）

Answer 2

Google reCAPTCHA 在 iFrame 中。您需要检查如何更改 iFrame 样式。检查：How to apply CSS to iframe?

Answer 3

我很确定你想让它像你的其他领域一样圆，对吧。尝试关注 css，如果可行请告诉我。

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

如何使用 css 定位和设计 Google 重新验证码？

How to target and style Google recaptcha with css?

html

css

wordpress

recaptcha