私はGoogleの新しいrecaptcha（v2）のスタイルを設定する方法を見つけるのにあまり成功していません。最終的な目標はレスポンシブにすることですが、幅などの単純なものでもスタイリングを適用するのが困難です。

彼らのAPIドキュメントには、テーマパラメーター以外のスタイル設定を制御する方法についての詳細は何も記載されていないようで、単純なCSSおよびJavaScriptソリューションではうまくいきませんでした。

基本的に、Googleの新しいバージョンのreCaptchaにCSSを適用できるようにする必要があります。JavaScriptを使用しても問題ありません。

概要：

悪いニュースの回答者になって申し訳ありませんが、調査とデバッグの結果、新しいreCAPTCHAコントロールのスタイルをカスタマイズする方法がないことは明らかです。コントロールはでラップされてiframeいるため、CSSを使用してスタイルを設定することはできません。また、Same-Origin Policyは、JavaScriptがコンテンツにアクセスできないようにし、ハッキングされたソリューションも除外します。

なぜカスタマイズAPIがないのですか？：

reCAPTCHA APIバージョン1.0とは異なり、APIバージョン2.0にはカスタマイズオプションはありません。この新しいAPIがどのように機能するかを考えると、それは当然のことです。

Are you a robot？からの抜粋 「CAPTCHA reCAPTCHAなし」の紹介：

新しいreCAPTCHA APIは簡単に聞こえるかもしれませんが、その控えめなチェックボックスの背後には高度な高度化があります。CAPTCHAは長い間、歪んだテキストをロボットが解決できないことに依存してきました。しかし、最近の調査によると、今日の人工知能テクノロジーは99.8％の精度で、歪んだテキストの最も難しいバリアントも解決できることがわかりました。したがって、歪んだテキスト自体は、もはや信頼できるテストではありません。

これに対抗するために、昨年、reCAPTCHAのAdvanced Risk Analysisバックエンドを開発しました。これは、ユーザーのCAPTCHAへの取り組み全体（前、最中、後）を積極的に考慮して、ユーザーが人間であるかどうかを判断します。これにより、歪んだテキストを入力する手間を省き、ユーザーにより良いエクスペリエンスを提供できます。今年の初めにバレンタインデーの投稿でこれについて話しました。

コントロール要素のスタイルを直接操作できた場合、新しいreCAPTCHAを可能にするユーザープロファイリングロジックを簡単に妨害する可能性があります。

カスタムテーマはどうですか？：

現在、新しいAPIにはthemeオプションがあり、lightやなどのプリセットテーマを選択できますdark。ただし、現在カスタムテーマを作成する方法はありません。を調べるiframeと、theme名前がsrc属性のクエリ文字列に渡されていることがわかります。このURLは次のようになります。

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

このパラメーターは、のラッパー要素で使用されるCSSクラス名iframeを決定し、使用するプリセットテーマを決定します。

縮小さソースを掘り、私はより多くのドキュメントに記載されている2以上である4つの有効なテーマ値は、実際に存在していることがわかったが、defaultとstandard同じですlight。

ここでは、このオブジェクトからクラス名を選択するコードを確認できます。

カスタムテーマのコードはなく、他のtheme値が指定されている場合は、standardテーマを使用します。

結論として：

現在、新しいreCAPTCHA要素を完全にスタイルする方法はありませんiframe。スタイルを適用できるのは、の周りのラッパー要素のみです。これはほぼ確実に意図的に行われたものであり、ユーザーがユーザーのプロファイリングロジックを破って、新しいcaptcha-freeチェックボックスを可能にすることを防ぎます。Googleが限られたカスタムテーマAPIを実装して、おそらく既存の要素のカスタム色を選択できるようにすることは可能ですが、Googleが完全なCSSスタイルを実装することは期待していません。

先に述べたように、ATMはありません。しかし、もし誰かが興味を持っているなら、2行だけ追加することで、少なくとも画面上で壊れたとしても、それを合理的に見せることができます。@mediaクエリで異なる値を割り当てることができます。

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

これが誰にも役立つことを願っています:-)。

残念ながら、reCaptcha v2のスタイルを設定することはできませんが、見栄えをよくすることは可能です。以下にコードを示します。

ここをクリックしてプレビュー

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

データサイズプロパティをgoogleのrecaptcha要素に追加し、モバイルの場合は「コンパクト」に等しくします。

参照：google recaptcha docs

以下のトリックを使用して応答性を高め、境界線を削除します。このトリックはおそらくreaptchaメッセージ/エラーを隠すでしょう。

このスタイルはrtl lang用ですが、簡単に変更できます。

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

あなたができることは、divの後ろにReCaptchaコントロールを隠すことです。次に、このdivでスタイルを作成します。そして、CSSの "pointer-events：none"を設定して、divをクリックできるようにします（DIVをクリックして、基礎となる要素に移動します）。

チェックボックスは、ユーザーがクリックしている場所にある必要があります。

recaptchaを再作成してコンテナにラップし、チェックボックスのみを表示させることができます。私の主な問題は、全幅を取得できなかったため、コンテナーの幅に拡張されることでした。唯一の問題は、フリックが表示される有効期限ですが、発生したらすぐにリセットします。

このデモを参照してくださいhttp://codepen.io/alejandrolechuga/pen/YpmOJX

function recaptchaReady () {
  grecaptcha.render('myrecaptcha', {
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
});
}

.recaptcha-wrapper {
    height: 70px;
  overflow: hidden;
  background-color: #F9F9F9;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  height: 70px;
  position: relative;
  margin-top: 17px;
  border: 1px solid #d3d3d3;
  color: #000;
}

.recaptcha-info {
  background-size: 32px;
  height: 32px;
  margin: 0 13px 0 13px;
  position: absolute;
  right: 8px;
  top: 9px;
  width: 32px;
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
  background-repeat: no-repeat;
}
.rc-anchor-logo-text {
  color: #9b9b9b;
  cursor: default;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-top: 5px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 37px;
}
.rc-anchor-checkbox-label {
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  left: 50px;
  top: 26px;
  position: absolute;
  color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
  border: none;
}
.rc-anchor-pt {
  color: #9b9b9b;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 8px;
  font-weight: 400;
  right: 10px;
  top: 53px;
  position: absolute;
  a:link {
    color: #9b9b9b;
    text-decoration: none;
  }
}

g-recaptcha {
  // transform:scale(0.95);
  // -webkit-transform:scale(0.95);
  // transform-origin:0 0;
  // -webkit-transform-origin:0 0;

}

.g-recaptcha {
  width: 41px;

  /* border: 1px solid red; */
  height: 38px;
  overflow: hidden;
  float: left;
  margin-top: 16px;
  margin-left: 6px;
  
    > div {
    width: 46px;
    height: 30px;
    background-color:  #F9F9F9;
    overflow: hidden;
    border: 1px solid red;
    transform: translate3d(-8px, -19px, 0px);
  }
  div {
    border: 0;
  }
}

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>

<div class="recaptcha-wrapper">
  <div id="myrecaptcha" class="g-recaptcha"></div>
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
        <div class="recaptcha-info"></div>
        <div class="rc-anchor-logo-text">reCAPTCHA</div>
        <div class="rc-anchor-pt">
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
          <span aria-hidden="true" role="presentation"> - </span>
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
        </div>
</div>

すごい！これがreCaptchaで利用できるスタイリングです。私はインラインスタイリングを次のように使用しています

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

あなたがインラインスタイリングで小さなカスタマイズをしたいものは何でも...

それがあなたを助けることを願っています!!

ハックっぽいソリューションを追加して応答性を高めるだけです。

追加のdivで再キャプチャをラップします。

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

スタイルを追加します。これは暗いテーマを想定しています。

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

これにより、次のようになります。

水平方向にサイズ変更され、境界線はありません。recaptchaのロゴが右側で途切れるので、右のボーダーでそれを隠しています。また、プライバシーと利用規約のリンクが非表示になっているため、それらを元に戻すこともできます。

wrapper要素に高さを設定し、recaptchaを垂直方向に中央に配置して高さを下げようとしました。残念ながら、overflow：hiddenとより低い高さの組み合わせは、iframeを強制終了するようです。

V2.0では不可能です。iframeはこれからのすべてのスタイリングをブロックします。暗いテーマや明るいテーマの代わりにカスタムテーマを追加するのは困難です。

非表示のreCAPTCHAを統合すると、次のことが可能になります。

非表示のreCAPTCHAを有効にするには、パラメーターをdivに配置するのではなく、htmlボタンに直接追加します。

a。data-callback =””。これはチェックボックスのキャプチャと同じように機能しますが、非表示にするために必要です。

b。data-badge：これにより、reCAPTCHAバッジ（ロゴと「reCAPTCHAで保護されている」というテキスト）の位置を変更できます。「bottomright」（デフォルト）、「bottomleft」、「inline」などの有効なオプション。バッジをボタンの真上に配置します。バッジをインラインにすると、バッジのCSSを直接​​制御できます。

お問い合わせフォーム7（ワードプレス）の回収に苦労している人のために、ここで私のために働く解決策があります

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

パーティーには遅れますが、私の解決策は誰かを助けるでしょう。

ビューポートが変更された場合やレイアウトが流動的である場合に、レスポンシブなWebサイトで機能する解決策は見つかりませんでした。

そこで、変化するビューポートに動的に適応するdjango-cms用のjQueryスクリプトを作成しました。よりモジュラーでjQueryに依存しない最新のバリアントが必要になり次第、この応答を更新します。

html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 

CSS

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-origin: top left;
}

js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;

誰かがまだ興味を持っている場合は、カスタムrecaptchaという名前の単純なJavaScriptライブラリ（jQuery依存関係なし）があります。CSSを使用してボタンをカスタマイズし、いくつかのjsイベント（ready / checked）を実装できます。アイデアは、デフォルトの再キャプチャを「非表示」にし、その上にボタンを配置することです。単にrecaptchaのIDを変更するだけです。

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

詳細については、https：//azentreprise.org/read.php？id = 1を参照してください。

私はこの種類のソリューション/クイックフィックスを追加しているだけなので、リンクが壊れた場合に失われることはありません。

このソリューションへのリンク「リンクを追加したいGoogle noCAPTCHA reCAPTCHAのサイズを変更する方法|オタクの女神」  はVikram Singh Sainiによって提供され、インラインCSSを使用してiframeのフレーミングを実施できることを簡単に概説しています。

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-origin:0 0;
  -webkit-transform-origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
</style>

また、暗いまたは明るい ReCaptchaテーマを選択することもできます。Angular 8アプリの1つでこれを使用しました

ライトモードとダークモードのあるサイト用にReCaptcha v2のスタイルを設定しようとしてこの答えに出くわしました。いくつかのより多くの周りを再生し、ほかにすることを発見しtransform、filterまたに適用されるiframeので、デフォルト/光のreCAPTCHAを使用して、ユーザーが暗いモードのときにこれをやってしまったの要素：

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

hue-rotate(180deg)そうロゴがまだ青と白さを維持しながら、ユーザは、それをクリックするとチェックマークがまだ緑であることになりinvert()、黒及びその逆に「編。

回答やコメントにこれが表示されなかったため、これが古いスレッドであっても共有することにしました。

ウェブサイトでGoogle reCAPTCHA v2のスタイル設定にCSSを使用できます。

– Google reCAPTCHA v2ウィジェットの背景と色を変更します。

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

または

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

–次のスニペットを使用して、Google reCAPTCHA v2ウィジェットのサイズを変更します。

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

– Responsive your Google reCAPTCHA v2：

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

上記のすべての要素、CSSのプロパティは参照用です。自分で変更できます（CSSクラスセレクターを使用する場合のみ）。

OIWブログを参照-Google reCAPTCHAのCSSを編集する方法（reCAPTCHAバッジのスタイルの変更、位置の変更、サイズ変更）

また、Google reCAPTCHA v3のスタイル設定もここで確認できます。