ReCaptcha API v2 Styling

110

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.

jhawes
sumber
Saya memiliki kesuksesan yang sama :(
Petroff
9
Mampu menerapkan CSS khusus ke reCaptcha v2 Google yang baru, dirilis baru Desember lalu, dan membuatnya berfungsi di semua browser desktop dan seluler modern (dan IE8 meskipun itu adalah peretasan).
Alex Beardsley
2
@skobaljic Silakan lihat komentar saya di atas. Inti dari pertanyaan ini adalah untuk mendapatkan jawaban bagi semua pengembang tentang cara menerapkan gaya APAPUN, titik. Tidak apa-apa tentang daya tanggap.
Alex Beardsley
4
Ini biola yang menunjukkan masalahnya. jsfiddle.net/slicedtoad/GVwZ4/4 Pada dasarnya, karena captcha ada dalam iframe lintas domain, captcha tidak dapat diberi gaya dengan css atau js. Dan referensi API tidak menjelaskan cara membuat tema kustom. Terlepas dari apakah ada solusi peretasan, ini mungkin harus dikirimkan ke pelacak masalah.
DanielST
2
@AlexBeardsley Tetapi kebijakan asal tunggal yang bertanggung jawab untuk memblokir pengeditan iframe adalah ukuran keamanan browser untuk melindungi pengguna . Cukup mudah untuk mematikannya. Dan jika Anda adalah bot, Anda tidak akan menggunakan browser sejak awal.
DanielST

Jawaban:

150

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.

nama kelas elemen

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.

objek kelas

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

kelas memilih kode

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.

Alexander O'Mara
sumber
1
Itu menegaskan apa yang saya temukan Alexander ... adalah rasa frustrasi awal saya dengan reCAPTCHA baru, tetapi sepertinya tidak ada jalan lain saat ini :(
jhawes
8
Ingin menambahkan link Bagaimana mengubah ukuran Google noCAPTCHA reCAPTCHA | The Geek Goddess , tempat penulis membagikan trik untuk membuat Captcha v2 responsif.
Vikram Singh Saini
alangkah baiknya memiliki setidaknya cara untuk menentukan latar belakang dan warna teks,
My1
1
Selanjutnya ke tema. Anda dapat meminta tema di onCallback: <script type = "text / javascript"> var onloadCallback = function () {grecaptcha.render ('your_recaptcha_div_id', {'sitekey': 'your_site_key', theme: 'dark' <= =========================}); }; </script>
ComeIn
52

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

bubb
sumber
Anda dapat menyesuaikan skala ke apa pun yang terlihat paling baik untuk tata letak khusus Anda. Properti transform-origin ditambahkan karena ketika Anda menggunakan properti transform, itu tidak mengubah ruang aktual yang digunakan oleh elemen. Itu hanyalah cara dasar untuk menunjukkan bagaimana Anda dapat dengan cepat mengubah ukuran reCAPTCHA dengan gaya sebaris. Untuk sesuatu yang lebih baik, saya sarankan untuk menetapkan kelas baru dan membiarkannya dalam ukuran penuh untuk apa pun di atas seluler, lalu menggunakan kueri media untuk mengubahnya ke ukuran yang lebih kecil. Lebih baik lagi menggunakan efek transisi sehingga secara visual "menyusut" saat Anda beralih ke seluler.
Grey Ayer
3
Anda juga ingin menggunakan aturan khusus browser, karena iphones 5 tidak mengenali hanya "transformasi" tampaknya: -ms-transform: scale (0.815); -webkit-transform: scale (0.815); -moz-transform: scale (0.815); -o-transformasi: skala (0.815); transformasi: skala (0.815); -ms-transform-origin: kiri atas; -webkit-transform-origin: kiri atas; -moz-transform-origin: kiri atas; -o-transform-origin: kiri atas; transform-origin: kiri atas;
Grey Ayer
8

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>
Tom Chan
sumber
Tidak berlaku untuk iframe recaptcha fallback untuk pengguna seluler dengan browser non-JS.
andreszs
8

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

Lihat: dokumen google recaptcha

Sumit Maingi
sumber
5

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>

recaptcha tidak ada trik gaya reponif captcha

Ahmad Dehnavi
sumber
4

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.

Magu
sumber
4

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

masukkan deskripsi gambar di sini

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>

alejandro
sumber
3
Tautan Anda rusak
NaveenDA
Rupanya Codepen menghapusnya tanpa persetujuan saya. Tidak yakin apakah ini dapat melanggar kebijakan Codepen / Google.
alejandro
3

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

Anileweb
sumber
2

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:

Recaptcha

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.

kthornbloom.dll
sumber
baru saja mencoba gayamu, sepertinya tidak berhasil untukku. -> jsfiddle.net/GVwZ4/31
My1
2

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

Yacine
sumber
2

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.

Sebastian Hagens
sumber
1
Saat membuat lencana sebaris, bagaimana cara mengontrol CSS lencana secara langsung?
Jianxin Gao
2

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

masukkan deskripsi gambar di sini

Ouahib Abdallah
sumber
1

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;
nirazul
sumber
0

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.

TheDreamer 979
sumber
0

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>
leopold
sumber
0

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

wintersa
sumber
0

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.

asontu
sumber
-1

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.

OIW
sumber
CSS hanya dicakup dalam dokumen yang sama. Iframe adalah seluruh dokumen dengan haknya sendiri, sehingga aturan CSS yang berlaku untuk halaman yang berisi iframe tersebut tidak dapat diterapkan ke halaman yang ada di dalam iframe tersebut.
sandes