更改新的Google Recaptcha(v2)宽度


76

我们刚刚开始实施列出的新的Google Recaptcha,网址https://www.google.com/recaptcha/intro/index.html

但是,新方法似乎包含在iFrame中,而不是嵌入到页面中,因此使CSS的应用更加困难。

但是,我们的表单宽度为400像素,因此希望将Recaptcha设置为相同的宽度。

目前看起来像,但是我们希望其他地方都一样。

有人知道怎么做吗?

谢谢

重新配置示例


Answers:


96

这是一个变通方法,但不一定总能奏效,具体取决于您扩展的规模。可以在这里找到说明:https : //www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

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


3
data-size="compact" 对我来说并不紧凑。猜猜我们将坚持使用变换进行缩放
Burak Tokak

2
当应用此技巧时,noscript扩展程序会在单击时向我发出警告,提示验证码被阻止
HasanG 2015年

您是否有指向扩展程序的链接?
colecmc

1
它很好用,但是它会在下面禁用我的提交按钮:(
kabrice

1
更改第三方组件(Google Recaptcha)的宽度会改变表单提交按钮的功能,这似乎很奇怪。
colecmc

12

不,目前您不能。只有使用旧的Recaptcha才有可能,但是我相信您将来将能够做到这一点。

除了解决方案,我没有其他建议。我遇到了同样的问题,所以我将recaptcha div(margin: 0 auto;display: table)居中,我认为它看起来比左对齐的div好得多。


1
解决了我的问题。谢谢
frekele 2015年

1
非常感谢@Luca Steeb,像魅力一样,它的工作非常完美:)
kuldip Makadiya

11

为了获得更多兼容性:

  -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;

3
您可能不需要它:许多浏览器可以理解非前缀版本,而其他浏览器则从未实现带前缀的版本。如果您要支持使用前缀的浏览器,请使用工具。您的示例在AutoPrefixer中进行处理时没有-moz--o-不需要。
古斯塔沃·罗德里格斯

7

有点晚了,但是我有一个简单的解决方法:

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

width: desired_width;

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

5
效果很好。我认为用隐藏的溢出来隐藏recaptcha徽标可能是违反条款的。我希望他们在不久的将来提供更好的自定义选项。
2015年

这很有帮助,而且非常简单。谢谢。
劳恩·柯

7

对于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>

参考


6

我发现以下最佳方法来调整Google Recaptchas的大小

选项1:您可以使用嵌入式样式来调整google ReCaptcha的大小。

通过使用内联样式来调整Google recapture大小的第一种方法。内联样式是CSS样式,使用style属性直接应用于页面HTML中的一个元素。这是向您展示如何使用内联样式来设置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>

选项2:通过在页面中放置以下样式(内部样式表)。

其次,您可以将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>

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

创建一个单独的文件,并命名为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>

来自博客的参考: https : //www.scratchcode.io/how-to-resize-the-google-recaptcha/


1
我针对我的情况对其进行了一些修改,但它的工作原理就像一个魅力,我为recaptcha div创建了一个自定义类,并将其放在css文件中。但是,内联对于开发也很有效,谢谢
Ricardo Rivera Nieves

5

您可以使用reCaptcha中的参数。默认情况下,它normal在上使用value data-size,您只需要使用它就可以compact在小型设备或某种较小宽度的布局上使用。

例:

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

4
.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');
}

可行

@SublymeRick使用媒体查询并更改所有转换:scale()
mateostabio

4

我在文档就绪事件中具有此功能,以便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';
     }
}

1
未捕获的TypeError:无法读取null的属性“ clientWidth”
apis17

4

这是我的工作:

1)将包装器div添加到recaptcha div。

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

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)可选:根据需要添加一些样式。

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

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


2

现在,您可以使用以下代码(由Google提供)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>


1

已经很晚了,但是如果仍然遇到问题,只想帮助别人。我在这里找到了不错的JS解决方案:https : //github.com/google/recaptcha/issues/61#issuecomment-376484690


这是使用jQuery的JavaScript代码:

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 302) {
        var scale = width / 302;
        $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('transform-origin', '0 0');
        $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
    }
}); 

IMP注意:它将支持所有设备,并且宽度在320px以下。


0

不幸的是,以上方法均无效。我最终可以使用以下材料来做到这一点:此解决方案可以100%工作(根据您的需要进行调整)

.g-recaptcha-wrapper {
    position: relative;
    border: 1px solid #ededed;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 0;
    #topHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
    #rightHider {
        position: absolute;
        top: 0;
        left: 295px;
        height: 100% !important;
        width: 15px;
        background-color: #f9f9f9;
    }
    #leftHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        width: 2px;
        background-color: #f9f9f9;
    }
    #bottomHider {
        position: absolute;
        bottom: 1px;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
}
<div class="g-recaptcha-wrapper">
  <re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
  <div id="topHider"></div>
  <div id="rightHider"></div>
  <div id="bottomHider"></div>
  <div id="leftHider"></div>
</div>

结果 在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.