Question

我目前正在努力调整（或样式化）表单中的reCaptcha元素。在移动设备上查看表单时（纵向），它会稍微悬挂一下，看起来很邋..

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

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

我尝试过针对单个元素并改变它们的大小，我尝试从元素中删除背景，因为仅此一点就会使它看起来更少＆＃34;时髦＆＃34;。

还有其他人有过类似的问题吗？如果需要代码，我将提供它，它只是由所述脚本呈现的相当多的代码。我明白，如果没有它我可能很难说出错的地方但是我不确定是否有人可能只是建议另一个选择尝试？

谢谢！

Answer 1

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

在两个内联样式的帮助下，您可以使reCAPTCHA非常适合您的移动设备：

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

`

Answer 2

我已经使用了这段代码

Line #147 - #150
            'theme' => $this->modx->getOption('recaptchaTheme',$scriptProperties,'clean'),
            'width' => $this->modx->getOption('recaptchaWidth',$scriptProperties,250),
            'height' => $this->modx->getOption('recaptchaHeight',$scriptProperties,150),
            'lang' => $this->modx->getOption('cultureKey',null,'en'),

example link

为移动设备调整/设置reCaptcha的大小

2 个答案: