html - 调整 reCAPTCHA 图像选择框的大小

Question

我在模态框内有一个表单，其中包含 reCAPTCHA。但是，当我单击 I am not robot 按钮时，您选择图像的框在浏览器中上升到高位，高到我无法选择任何内容。

附件是屏幕截图，我查看了其中的 css，这似乎是由谷歌自动生成的？有没有办法解决这个问题或通过 css 覆盖？

我尝试搜索网络，但我看到的只是调整 reCAPTCHA 框的大小，而不是图像选择框

我的代码是这样的，它在模态正文标签内:

<div class="g-recaptcha" data-size="compact" ></div>

我的代码:

var CaptchaCallback = function(){
$('.g-recaptcha').each(function(index, el) {
    grecaptcha.render(el, {'sitekey' : 'mycode'});
    console.log("Re-capcha loaded");
});
 };

Answer 1

这适用于我所有具有 Google Recaptcha 的弹出窗口。

<div class="g-recaptcha" 
     style="transform:scale(0.77);
     -webkit-transform:scale(0.70);
     transform-origin:4% 0 ;
     -webkit-transform-origin:7% 0;
     "data-sitekey="Your Site Key">
</div>

通常，Recaptcha 屏幕(带有图像)紧挨着 Recaptcha 复选框开始。 我还用我的弹出窗口测试了你的代码，它运行良好。您的弹出式 CSS 可能有问题。看一看，然后试一试。