web-dev-qa-db-ja.com

新しいGoogle Recaptcha（v2）の幅を変更する

リストにあるとおり、新しいGoogle recaptchaの実装を開始しました https://www.google.com/recaptcha/intro/index.html

ただし、新しいメソッドはページに埋め込まれているのではなく、iFrameに含まれているため、CSSの適用がより困難になっています。

ただし、幅が400ピクセルのフォームがあるため、同じ幅のreaptchaが必要です。

現在は次のように見えますが、他と同じようにしたいです。

誰もまだこれを行う方法を知っていますか？

ありがとう

recaptcha layout example

cssiframewidthrecaptcha
61
Owen

ここに回避策がありますが、どれだけ拡張できるかに応じて、常に素晴らしいとは限りません。説明はここにあります： https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

UPDATE：Googleは、パラメータを介した小さいサイズのサポートを追加しました。ドキュメントをご覧ください- https://developers.google.com/recaptcha/docs/display#render_param

82
colecmc

より多くの互換性のため：

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

いいえ、現在はできません。それは古いレカプチャでのみ可能でしたが、あなたは将来それを行うことができると確信しています。

解決策はありませんが、提案があります。私も同じ問題を抱えていたので、recaptcha div（margin: 0 auto;display: table）を中央に配置しました。左揃えのdivよりもずっと良く見えると思います。

9
Luca Steeb

少し遅れましたが、簡単な回避策があります：

このコードを「g-recaptcha」クラスに追加するだけです。

width: desired_width;

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

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

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';
     }
}
4
Donald Skipper

これで、以下のコードを使用できます（Googleによる）
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

2
PurTahan

Google Recaptchaのサイズを変更する次の最良の方法を見つけました

オプション1：インラインスタイルを使用して、Google ReCaptchaのサイズを変更できます。

インラインスタイルを使用して、Googleの再キャプチャのサイズを変更する非常に最初の方法。インラインスタイルは、style属性を使用して、ページのHTML内の1つの要素に直接適用される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>

オプション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>
2
Mayank Dudakiya

これは私の回避策です：

1）recaptcha divにラッパー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;}

1
Kevin Lau

ReCaptchaのパラメーターを使用できます。デフォルトでは、data-sizeでnormalの値を使用します。これは、小さなデバイスやある種の小さな幅のレイアウトに合わせるためにcompactを使用する必要があります。

例：

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