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.
javascript
css
captcha
recaptcha
jhawes
sumber
sumber
Jawaban:
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" :
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
theme
opsi , yang dengannya Anda dapat memilih tema prasetel sepertilight
dandark
. Namun saat ini tidak ada cara untuk membuat tema khusus. Jika kita memeriksaiframe
, kita akan menemukantheme
nama yang diteruskan dalam string kuerisrc
atribut. URL ini terlihat seperti berikut ini.Parameter ini menentukan nama kelas CSS apa yang digunakan pada elemen pembungkus di
iframe
dan 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
default
danstandard
sama denganlight
.Kita dapat melihat kode yang memilih nama kelas dari objek ini di sini.
Tidak ada kode untuk tema khusus, dan jika ada
theme
nilai lain yang ditentukan, itu akan menggunakanstandard
tema.Kesimpulannya:
Saat ini, tidak ada cara untuk menata sepenuhnya elemen reCAPTCHA baru, hanya elemen pembungkus di sekitar yang
iframe
dapat 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.sumber
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.
Semoga ini bisa membantu siapa pun :-).
sumber
Sayangnya kami tidak dapat menata reCaptcha v2, tetapi memungkinkan untuk membuatnya terlihat lebih baik, berikut kodenya:
Klik di sini untuk melihat pratinjau
sumber
Tambahkan properti ukuran data ke elemen google recaptcha dan buat itu sama dengan "ringkas" untuk seluler.
Lihat: dokumen google recaptcha
sumber
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.
sumber
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.
sumber
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
sumber
Bagus! Sekarang, inilah gaya yang tersedia untuk reCaptcha .. Saya hanya menggunakan gaya sebaris seperti:
apa pun yang ingin Anda lakukan penyesuaian kecil dalam gaya sebaris ...
Semoga bisa membantu Anda !!
sumber
Hanya menambahkan solusi hack-ish untuk membuatnya responsif.
Bungkus recaptcha dalam div ekstra:
Tambahkan gaya. Ini mengasumsikan tema gelap.
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.
sumber
di V2.0 itu tidak mungkin. Iframe memblokir semua gaya dari ini. Sulit untuk menambahkan tema khusus daripada yang gelap atau terang.
sumber
Dengan integrasi reCAPTCHA yang tidak terlihat, Anda dapat melakukan hal berikut:
sumber
Jika seseorang berjuang dengan recaptcha dari formulir kontak 7 (wordpress) berikut adalah solusi yang sesuai untuk saya
sumber
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
css
js
sumber
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.
Lihat https://azentreprise.org/read.php?id=1 untuk informasi lebih lanjut.
sumber
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.
sumber
Anda juga dapat memilih antara tema ReCaptcha gelap atau terang . Saya menggunakan ini di salah satu Aplikasi Angular 8 saya
sumber
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
,filter
juga diterapkan keiframe
elemen sehingga akhirnya menggunakan ReCaptcha default / terang dan melakukan ini ketika pengguna dalam mode gelap:The
hue-rotate(180deg)
membuatnya begitu bahwa logo tersebut masih biru dan check-mark masih hijau ketika pengguna mengklik itu, sambil menjaga putihinvert()
'ed untuk hitam dan sebaliknya.Tidak melihat ini dalam jawaban atau komentar apa pun, jadi putuskan untuk membagikannya meskipun ini adalah utas lama.
sumber
Anda dapat menggunakan beberapa CSS untuk gaya Google reCAPTCHA v2 di situs Anda:
- Ubah latar belakang, warna widget Google reCAPTCHA v2:
atau
- Ubah ukuran widget Google reCAPTCHA v2 dengan menggunakan cuplikan ini:
- Responsif Google reCAPTCHA v2 Anda:
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.
sumber