调整reCAPTCHA图像选择框的大小

Question

我在模态中有一个表单，里面有reCAPTCHA。但是，当我点击I am not robot按钮时，您选择图像的框在浏览器中会变得很高，足够高，我无法选择任何内容。

附件是屏幕截图，我查看了里面的CSS，看起来这是谷歌自动生成的？无论如何要解决此问题或通过css覆盖？

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

我的代码就是这个，这是一个模态正文标记：

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

我的js：

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复选框旁边。 我还用弹出窗口测试了你的代码，效果很好。你的popup css可能有问题。看看它，然后尝试一下。