Saya belum banyak berhasil menemukan cara memberi gaya pada recaptcha baru Google (v2). Tujuan akhirnya adalah membuatnya responsif, tetapi saya mengalami kesulitan menerapkan gaya bahkan untuk hal-hal sederhana seperti lebar.

Dokumentasi API mereka tampaknya tidak memberikan spesifik apa pun tentang cara mengontrol gaya sama sekali selain parameter tema , dan solusi CSS & JavaScript sederhana tidak berhasil untuk saya.

Pada dasarnya, saya harus dapat menerapkan CSS ke reCaptcha versi baru Google. Menggunakan JavaScript dengan itu dapat diterima.

Gambaran:

Maaf menjadi penjawab berita buruk, tetapi setelah penelitian dan debugging, cukup jelas bahwa tidak ada cara untuk menyesuaikan gaya kontrol reCAPTCHA baru. Kontrol dibungkus dalam iframe, yang mencegah penggunaan CSS untuk menatanya, dan Kebijakan Asal-Sama mencegah JavaScript mengakses konten, bahkan mengesampingkan solusi hacky.

Mengapa Tidak Ada Kustomisasi API ?:

Tidak seperti reCAPTCHA API Versi 1.0 , tidak ada opsi penyesuaian di API Versi 2.0 . Jika kami mempertimbangkan cara kerja API baru ini, tidak mengherankan mengapa.

Kutipan dari Apakah Anda robot? Memperkenalkan "Tidak ada CAPTCHA reCAPTCHA" :

Meskipun API reCAPTCHA baru mungkin terdengar sederhana, ada kecanggihan tingkat tinggi di balik kotak centang sederhana itu. CAPTCHA telah lama mengandalkan ketidakmampuan robot untuk memecahkan teks yang terdistorsi. Namun, penelitian kami baru-baru ini menunjukkan bahwa teknologi Artificial Intelligence saat ini dapat memecahkan varian teks terdistorsi yang paling sulit sekalipun dengan akurasi 99,8%. Dengan demikian, teks yang terdistorsi tidak lagi menjadi tes yang dapat diandalkan.

Untuk mengatasi hal ini, tahun lalu kami mengembangkan backend Analisis Risiko Lanjutan untuk reCAPTCHA yang secara aktif mempertimbangkan seluruh keterlibatan pengguna dengan CAPTCHA — sebelum, selama, dan setelah — untuk menentukan apakah pengguna tersebut adalah manusia. Hal ini memungkinkan kami untuk tidak terlalu mengandalkan pengetikan teks terdistorsi dan, pada gilirannya, menawarkan pengalaman yang lebih baik bagi pengguna. Kami membicarakan hal ini di postingan Hari Valentine kami awal tahun ini.

Jika Anda dapat secara langsung memanipulasi gaya elemen kontrol, Anda dapat dengan mudah mengganggu logika profil pengguna yang memungkinkan reCAPTCHA baru.

Bagaimana dengan Tema Kustom ?:

Sekarang API baru memang menawarkan themeopsi , yang dengannya Anda dapat memilih tema prasetel seperti lightdan dark. Namun saat ini tidak ada cara untuk membuat tema khusus. Jika kita memeriksa iframe, kita akan menemukan themenama yang diteruskan dalam string kueri srcatribut. URL ini terlihat seperti berikut ini.

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

Parameter ini menentukan nama kelas CSS apa yang digunakan pada elemen pembungkus di iframedan menentukan tema prasetel yang akan digunakan.

Menggali sumber yang diperkecil, saya menemukan bahwa sebenarnya ada 4 nilai tema yang valid, yang lebih dari 2 yang tercantum dalam dokumentasi, tetapi defaultdan standardsama dengan light.

Kita dapat melihat kode yang memilih nama kelas dari objek ini di sini.

Tidak ada kode untuk tema khusus, dan jika ada themenilai lain yang ditentukan, itu akan menggunakan standardtema.

Kesimpulannya:

Saat ini, tidak ada cara untuk menata sepenuhnya elemen reCAPTCHA baru, hanya elemen pembungkus di sekitar yang iframedapat diberi gaya. Ini hampir pasti dilakukan dengan sengaja, untuk mencegah pengguna melanggar logika pembuatan profil pengguna yang memungkinkan kotak centang bebas captcha baru. Mungkin saja Google dapat menerapkan API tema khusus terbatas, mungkin memungkinkan Anda memilih warna khusus untuk elemen yang ada, tetapi saya tidak berharap Google menerapkan gaya CSS penuh.

Seperti orang yang disebutkan di atas, tidak ada ATM. tetapi jika ada yang tertarik, maka dengan menambahkan hanya dua baris Anda setidaknya dapat membuatnya terlihat masuk akal, jika rusak di layar mana pun. Anda dapat menetapkan nilai yang berbeda dalam kueri @media.

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

Semoga ini bisa membantu siapa pun :-).

Sayangnya kami tidak dapat menata reCaptcha v2, tetapi memungkinkan untuk membuatnya terlihat lebih baik, berikut kodenya:

Klik di sini untuk melihat pratinjau

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

Tambahkan properti ukuran data ke elemen google recaptcha dan buat itu sama dengan "ringkas" untuk seluler.

Lihat: dokumen google recaptcha

Saya menggunakan trik di bawah ini untuk membuatnya responsif dan menghapus batas. Trik ini mungkin menyembunyikan pesan / kesalahan recaptcha.

Gaya ini untuk rtl lang tetapi Anda dapat mengubahnya dengan mudah.

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

Yang dapat Anda lakukan adalah menyembunyikan Kontrol ReCaptcha di belakang div. Kemudian buat gaya Anda pada div ini. Dan atur css "pointer-events: none" di atasnya, sehingga Anda dapat mengklik melalui div ( Klik melalui DIV ke elemen yang mendasarinya ).

Kotak centang harus berada di tempat pengguna mengklik.

Anda dapat membuat ulang recaptcha, membungkusnya dalam wadah dan hanya membiarkan kotak centang terlihat. Masalah utama saya adalah saya tidak bisa mengambil lebar penuh jadi sekarang meluas ke lebar wadah. Satu-satunya masalah adalah kedaluwarsa Anda dapat melihat film tetapi segera terjadi saya mengatur ulang.

Lihat demo ini 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>

Bagus! Sekarang, inilah gaya yang tersedia untuk reCaptcha .. Saya hanya menggunakan gaya sebaris seperti:

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

apa pun yang ingin Anda lakukan penyesuaian kecil dalam gaya sebaris ...

Semoga bisa membantu Anda !!

Hanya menambahkan solusi hack-ish untuk membuatnya responsif.

Bungkus recaptcha dalam div ekstra:

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

Tambahkan gaya. Ini mengasumsikan tema gelap.

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

Ini menghasilkan yang berikut:

Sekarang akan mengubah ukurannya secara horizontal, dan tidak memiliki batas. Logo recaptcha akan terpotong di sebelah kanan, jadi saya menyembunyikannya dengan tepi kanan. Itu juga menyembunyikan privasi dan tautan persyaratan, jadi Anda mungkin ingin menambahkannya kembali.

Saya mencoba untuk mengatur ketinggian pada elemen pembungkus, dan kemudian secara vertikal memusatkan recaptcha untuk mengurangi ketinggian. Sayangnya, setiap kombo luapan: tersembunyi dan ketinggian yang lebih kecil tampaknya mematikan iframe.

di V2.0 itu tidak mungkin. Iframe memblokir semua gaya dari ini. Sulit untuk menambahkan tema khusus daripada yang gelap atau terang.

Dengan integrasi reCAPTCHA yang tidak terlihat, Anda dapat melakukan hal berikut:

Untuk mengaktifkan reCAPTCHA Tak Terlihat, daripada meletakkan parameter di div, Anda dapat menambahkannya langsung ke tombol html.

Sebuah. data-callback = ””. Ini berfungsi seperti kotak centang captcha, tetapi diperlukan untuk yang tidak terlihat.

b. data-badge: Ini memungkinkan Anda untuk memposisikan ulang badge reCAPTCHA (yaitu logo dan teks 'dilindungi oleh reCAPTCHA'). Opsi yang valid seperti 'bottomright' (default), 'bottomleft' atau 'inline' yang akan menempatkan lencana tepat di atas tombol. Jika Anda membuat lencana sebaris, Anda dapat mengontrol CSS lencana secara langsung.

Jika seseorang berjuang dengan recaptcha dari formulir kontak 7 (wordpress) berikut adalah solusi yang sesuai untuk saya

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

Terlambat ke pesta, tapi mungkin solusi saya akan membantu seseorang.

Saya belum menemukan solusi apa pun yang berfungsi di situs web responsif saat viewport berubah atau tata letaknya lancar.

Jadi saya telah membuat skrip jQuery untuk django-cms yang secara dinamis beradaptasi dengan tampilan yang berubah. Saya akan memperbarui tanggapan ini segera setelah saya membutuhkan varian modernnya yang lebih modular dan tidak memiliki ketergantungan 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;

Jika seseorang masih tertarik, ada pustaka javascript sederhana (tanpa ketergantungan jQuery), bernama custom recaptcha. Ini memungkinkan Anda menyesuaikan tombol dengan css dan menerapkan beberapa acara js (siap / dicentang). Idenya adalah membuat recaptcha default "tidak terlihat" dan meletakkan tombol di atasnya. Ubah saja id recaptcha dan hanya itu.

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

Lihat https://azentreprise.org/read.php?id=1 untuk informasi lebih lanjut.

Saya hanya menambahkan solusi semacam ini / perbaikan cepat sehingga tidak akan hilang jika tautan rusak.

Tautkan ke solusi ini "Ingin menambahkan tautan Cara mengubah ukuran Google noCAPTCHA reCAPTCHA | Dewi Geek"  disediakan oleh Vikram Singh Saini dan secara sederhana menguraikan bahwa Anda dapat menggunakan CSS sebaris untuk memaksakan pembingkaian 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>

Anda juga dapat memilih antara tema ReCaptcha gelap atau terang . Saya menggunakan ini di salah satu Aplikasi Angular 8 saya

Saya menemukan jawaban ini mencoba menata ReCaptcha v2 untuk situs yang memiliki mode terang dan gelap. Bermain-main lagi dan menemukan bahwa selain itu transform, filterjuga diterapkan ke iframeelemen sehingga akhirnya menggunakan ReCaptcha default / terang dan melakukan ini ketika pengguna dalam mode gelap:

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

The hue-rotate(180deg)membuatnya begitu bahwa logo tersebut masih biru dan check-mark masih hijau ketika pengguna mengklik itu, sambil menjaga putih invert()'ed untuk hitam dan sebaliknya.

Tidak melihat ini dalam jawaban atau komentar apa pun, jadi putuskan untuk membagikannya meskipun ini adalah utas lama.

Anda dapat menggunakan beberapa CSS untuk gaya Google reCAPTCHA v2 di situs Anda:

- Ubah latar belakang, warna widget Google reCAPTCHA v2:

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

atau

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

- Ubah ukuran widget Google reCAPTCHA v2 dengan menggunakan cuplikan ini:

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

- Responsif Google reCAPTCHA v2 Anda:

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

Semua elemen, properti CSS di atas itu hanya untuk referensi Anda. Anda dapat mengubahnya sendiri (hanya menggunakan pemilih kelas CSS).

Lihat Blog OIW - Cara Mengedit CSS Google reCAPTCHA (Gaya Ulang, Ubah Posisi, Ubah Ukuran Lencana reCAPTCHA)

Anda juga dapat menemukan gaya Google reCAPTCHA v3 di sana.