jquery - 为移动设备调整 reCaptcha 的大小/样式

Question

我目前正在努力调整表单中 reCaptcha 元素的大小(或样式)。在移动设备(纵向)上查看表单时，它有点挂起，看起来很草率。

表单来自 formstack 并由脚本呈现。我已经能够使用 CSS 为表单的每个其他元素设置样式，并使用 jQuery 为每个输入添加占位符属性，没有任何问题。但是，一旦我开始使用 reCaptcha block ，这些选项似乎都不起作用。我已经能够直接在 Chrome 开发工具中进行更改以获得我想要的结果(或者一个可以工作的结果)，但是一旦将这些与 CSS 或 jQuery 一起应用，都没有工作。我也看过 these google recaptcha docs ，但是这甚至不是同一种...相反，this is what I'm working with .

所以，我不确定接下来要尝试什么或到哪里寻找解决方案。

我试过定位单个元素并更改它们的大小，我试过只删除元素的背景，因为仅此一项就可以使它看起来不那么“时髦”。

有没有人遇到过类似的问题？如果需要代码，我会提供它，它只是由所述脚本呈现的相当多的代码。我知道如果没有它，我什至很难提出我哪里出错了，但我不确定是否有人可以提出另一种选择来尝试？

谢谢!

Answer 1

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

仅借助两个内联样式，您就可以使 reCAPTCHA 非常适合您的移动设备:

<div class="g-recaptcha" 
 data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 
 style="transform:scale(0.77);transform-origin:0 0">

`