CSS 更改新的 Google Recaptcha (v2) 宽度

Change New Google Recaptcha (v2) Width

提问by Owen

We've just started to implement the new google recaptcha as listed https://www.google.com/recaptcha/intro/index.html

我们刚刚开始实施新的 google recaptcha，如https://www.google.com/recaptcha/intro/index.html

However the new method seems to be contained within an iFrame rather than embedded into the page thus making applying CSS more difficult.

然而，新方法似乎包含在 iFrame 中而不是嵌入到页面中，从而使应用 CSS 变得更加困难。

However we've got our form which is 400px wide so would like to have the recaptcha the same width.

但是，我们的表单宽度为 400 像素，因此希望重新验证码具有相同的宽度。

Currently it looks like, however we'd like it the same with as the rest.

目前它看起来像，但是我们希望它与其他部分一样。

Does anybody know how to do this yet?

有人知道怎么做吗？

Thanks

谢谢

回答by colecmc

Here is a work around but not always a great one, depending on how much you scale it. Explanation can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

这是一种解决方法，但并不总是很好，这取决于您对其进行扩展的程度。可以在这里找到解释：https: //www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}

UPDATE:Google has added support for a smaller size via a parameter. Have a look at the docs - https://developers.google.com/recaptcha/docs/display#render_param

更新：谷歌通过参数增加了对较小尺寸的支持。看看文档 - https://developers.google.com/recaptcha/docs/display#render_param

回答by Luca Steeb

No, currently you can not. It was only possible with the old recaptcha, but I'm sure you will be able to do that in the future.

不，目前你不能。只有旧的 recaptcha 才有可能，但我相信你将来也能做到。

I have no solution but a suggestion. I had the same problem, so I centered the recaptcha div (margin: 0 auto;display: table), I think it looks much better than a left-aligned div.

我没有解决办法，只有一个建议。我遇到了同样的问题，所以我将 recaptcha div ( margin: 0 auto;display: table)居中，我认为它看起来比左对齐的 div 好得多。

回答by k1r8r0wn

For more compatibility:

更多兼容性：

  -webkit-transform: scale(0.77);
     -moz-transform: scale(0.77);
      -ms-transform: scale(0.77);
       -o-transform: scale(0.77);
          transform: scale(0.77);
   -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
           transform-origin: 0 0;

回答by Muntasim

For the new version of noCaptcha Recaptcha the following works for me:

对于新版本的 noCaptcha Recaptcha，以下对我有用：

<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>

Ref

参考

回答by Andrew Rockwell

A bit late but I've got an easy workaround:

有点晚了，但我有一个简单的解决方法：

Just add this code to your "g-recaptcha" class:

只需将此代码添加到您的“g-recaptcha”类中：

width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;

回答by Avanish Kumar

.g-recaptcha{
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    -moz-transform-origin:0; 
    -ms-transform-origin:0;
    -o-transform-origin:0;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transform-origin:0 0;
    transform-origin:0;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}

回答by Donald Skipper

I have this function in the document ready event so that the reCaptcha is dynamically sized. Anyone should be able to drop this in place and go.

我在文档就绪事件中有此功能，以便动态调整 reCaptcha 的大小。任何人都应该能够把它放在适当的地方然后去。

function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
         childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
         scale = (parentWidth) / (childWidth);
         new_width = childWidth * scale;
         document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
         document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
     }
}

回答by Mayank Dudakiya

I have found following best ways to resize google recaptchas

我发现以下最佳方法可以调整 google recaptchas 的大小

Option 1: You can resize google ReCaptcha by using inline style.

选项 1：您可以使用内联样式调整 google ReCaptcha 的大小。

A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.

使用内联样式调整 google recapture 大小的第一种方法。内联样式是直接在页面的 HTML 中使用 style 属性应用于一个元素的 CSS 样式。以下示例向您展示了如何使用内联样式设置 Google reCAPTCHA 的样式。

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

Option 2: By putting the following style in your page (Internal Style Sheet).

选项 2：通过将以下样式放入您的页面（内部样式表）。

Secondly, you can put style for ReCaptcha into the page between and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.

其次，您可以将 ReCaptcha 的样式放入 和 之间的页面中。内部样式表是 HTML 页面上包含样式定义的部分。内部样式表是通过使用文档区域内的标记来定义的。以下示例向您展示了如何使用外部样式表设置 Google reCAPTCHA 的样式。

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Option 3: Resize google ReCaptcha by using an external stylesheet.

选项 3：使用外部样式表调整 google ReCaptcha 的大小。

Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .

创建一个单独的文件并命名为 style.css 并在页面中的元素之间添加此文件链接。例如。.

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

回答by KirtJ

You can use parameter from reCaptcha. By default it uses normalvalue on data-size, You just have to use compactto fit this on small devices or some-kind small width layouts.

您可以使用 reCaptcha 中的参数。默认情况下，它使用normalon 值data-size，您只需要使用它compact来适应小型设备或某种小宽度布局。

example:

例子：

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

回答by Kevin Lau

This is my work around:

这是我的工作：

1) Add a wrapper div to the recaptcha div.

1）向recaptcha div添加一个包装div。

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Add javascript/jquery code.

2) 添加 javascript/jquery 代码。

$(function(){
    // global variables
    captchaResized = false;
    captchaWidth = 304;
    captchaHeight = 78;
    captchaWrapper = $('#recaptcha-wrapper');
    captchaElements = $('#rc-imageselect, .g-recaptcha');

    resizeCaptcha();
    $(window).on('resize', function() {
        resizeCaptcha();
    });
});

function resizeCaptcha() {
    if (captchaWrapper.width() >= captchaWidth) {
        if (captchaResized) {
            captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', '');
            captchaWrapper.height(captchaHeight);
            captchaResized = false;
        }
    } else {
        var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
        captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0');
        captchaWrapper.height(captchaHeight * scale);
        if (captchaResized == false) captchaResized = true;
    }
}

3) Optional: add some styling if needed.

3）可选：如果需要，添加一些样式。

#recaptcha-wrapper {text-align:center;margin-bottom:15px;}

#recaptcha-wrapper {text-align:center;margin-bottom:15px;}

.g-recaptcha {display:inline-block;}

.g-recaptcha {display:inline-block;}