Nie odniosłem wielkiego sukcesu w znalezieniu stylu nowej recaptcha Google (v2). Ostatecznym celem jest uczynienie go responsywnym, ale mam trudności z zastosowaniem stylizacji nawet do prostych rzeczy, takich jak szerokość.
Wydaje się, że ich dokumentacja API nie zawiera żadnych szczegółów na temat sterowania stylami w ogóle poza parametrem motywu , a proste rozwiązania CSS i JavaScript nie działają dla mnie.
Zasadniczo muszę być w stanie zastosować CSS do nowej wersji Google reCaptcha. Używanie razem z nim JavaScript jest dopuszczalne.
javascript
css
captcha
recaptcha
jhawes
źródło
źródło
Odpowiedzi:
Przegląd:
Przepraszam, że odpowiadam na złe wieści, ale po badaniach i debugowaniu jest całkiem jasne, że nie ma sposobu, aby dostosować styl nowych elementów sterujących reCAPTCHA. Kontrole są pakowane w sposób
iframe
, który uniemożliwia korzystanie z CSS do stylu ich i tego samego pochodzenia polityka zapobiega JavaScript dostępu do zawartości, wykluczając nawet hacky rozwiązanie.Dlaczego nie dostosuj interfejsu API ?:
W przeciwieństwie do reCAPTCHA API w wersji 1.0 , w wersji 2.0 API nie ma opcji dostosowywania . Jeśli zastanowimy się, jak działa ten nowy interfejs API, nie jest zaskoczeniem, dlaczego.
Fragment z filmu Czy jesteś robotem? Przedstawiamy „Brak CAPTCHA reCAPTCHA” :
Gdybyś był w stanie bezpośrednio manipulować stylizacją elementów sterujących, mógłbyś łatwo ingerować w logikę profilowania użytkownika, która umożliwia nową reCAPTCHA.
A co z niestandardowym motywem ?:
Teraz nowy interfejs API oferuje
theme
opcję , za pomocą której możesz wybrać gotowy motyw, taki jaklight
idark
. Jednak obecnie nie ma sposobu na utworzenie niestandardowego motywu. Jeśli sprawdzimyiframe
, stwierdzimy, żetheme
nazwa jest przekazywana w ciągu zapytaniasrc
atrybutu. Ten adres URL wygląda mniej więcej tak.Ten parametr określa, jaka nazwa klasy CSS jest używana w elemencie opakowania w
iframe
i określa predefiniowany motyw do użycia.Przeglądając zminimalizowane źródło, odkryłem, że w rzeczywistości istnieją 4 prawidłowe wartości motywu, czyli więcej niż 2 wymienione w dokumentacji, ale
default
istandard
są takie same jaklight
.Widzimy tutaj kod, który wybiera nazwę klasy z tego obiektu.
Nie ma kodu dla motywu niestandardowego, a jeśli
theme
zostanie określona jakakolwiek inna wartość, użyjestandard
motywu.Podsumowując:
Obecnie nie ma możliwości pełnego
iframe
wystylizowania nowych elementów reCAPTCHA, stylizować można jedynie elementy owijające wokół nich. Było to prawie na pewno zrobione celowo, aby uniemożliwić użytkownikom złamanie logiki profilowania użytkownika, która umożliwia nowe pole wyboru wolne od captcha. Możliwe, że Google mógłby zaimplementować ograniczony interfejs API motywów niestandardowych, być może umożliwiając wybór niestandardowych kolorów dla istniejących elementów, ale nie spodziewałbym się, że Google zaimplementuje pełne style CSS.źródło
Jak wspomniano powyżej, nie ma możliwości bankomatu. ale mimo to, jeśli ktoś jest zainteresowany, dodając tylko dwie linie, możesz przynajmniej nadać mu rozsądny wygląd, jeśli pęknie na dowolnym ekranie. możesz przypisać inną wartość w zapytaniu @media.
Mam nadzieję, że to pomoże każdemu :-).
źródło
Niestety nie możemy stylizować reCaptcha v2, ale można to poprawić, oto kod:
Kliknij tutaj, aby wyświetlić podgląd
źródło
Dodaj właściwość rozmiaru danych do elementu google recaptcha i ustaw ją jako „kompaktową” w przypadku telefonu komórkowego.
Zobacz: Google recaptcha docs
źródło
Używam poniższej sztuczki, aby był responsywny i usuwał granice. ta sztuczka może ukryć komunikat / błąd recaptcha.
Ten styl jest przeznaczony dla rtl lang, ale możesz go łatwo zmienić.
źródło
Możesz ukryć kontrolkę ReCaptcha za elementem div. Następnie ułóż swój styl na tym div. I ustaw na nim css "pointer-events: none", abyś mógł klikać przez div ( kliknij przez DIV do podstawowych elementów ).
Pole wyboru powinno znajdować się w miejscu, w którym użytkownik klika.
źródło
Możesz odtworzyć recaptcha, zawinąć ją w pojemnik i pozostawić widoczne tylko pole wyboru. Moim głównym problemem było to, że nie mogłem przyjąć pełnej szerokości, więc teraz rozszerza się do szerokości kontenera. Jedynym problemem jest wygaśnięcie, które widać migotanie, ale jak tylko to się dzieje, resetuję go.
Zobacz to demo http://codepen.io/alejandrolechuga/pen/YpmOJX
źródło
Wspaniały! Teraz dostępne są style dla reCaptcha. Po prostu używam stylów wbudowanych, takich jak:
cokolwiek chcesz zrobić, małe modyfikacje w stylizacji inline ...
Mam nadzieję, że to ci pomoże !!
źródło
Wystarczy dodać hakerskie rozwiązanie, aby było responsywne.
Zawiń recaptcha w dodatkowy div:
Dodaj style. Zakłada to ciemny motyw.
Daje to:
Teraz zmieni rozmiar w poziomie i nie ma obramowania. Logo recaptcha zostanie odcięte po prawej stronie, więc ukrywam je za pomocą obramowania po prawej stronie. Ukrywa również linki do prywatności i warunków, więc możesz chcieć je ponownie dodać.
Próbowałem ustawić wysokość elementu owijającego, a następnie wyśrodkować w pionie recaptcha, aby zmniejszyć wysokość. Niestety, każda kombinacja przepełnienia: ukryta i mniejsza wysokość wydaje się zabijać iframe.
źródło
w wersji 2.0 nie jest to możliwe. Element iframe blokuje wszystkie style. Trudno jest dodać niestandardowy motyw zamiast ciemnego lub jasnego.
źródło
Dzięki integracji niewidocznego reCAPTCHA możesz wykonać następujące czynności:
źródło
W przypadku, gdy ktoś boryka się z recaptcha formularza kontaktowego 7 (wordpress) tutaj jest rozwiązanie działające dla mnie
źródło
Spóźniony na imprezę, ale może moje rozwiązanie komuś pomoże.
Nie znalazłem żadnego rozwiązania, które działałoby na responsywnej stronie internetowej, gdy zmienia się rzutnia lub układ jest płynny.
Stworzyłem więc skrypt jQuery dla django-cms, który dynamicznie dostosowuje się do zmieniającego się widoku. Mam zamiar zaktualizować tę odpowiedź, gdy tylko będę potrzebować jej nowoczesnego wariantu, który jest bardziej modułowy i nie ma zależności od jQuery.
html
css
js
źródło
Jeśli ktoś nadal jest zainteresowany, to jest prosta biblioteka javascript (bez zależności od jQuery) o nazwie custom recaptcha. Pozwala dostosować przycisk za pomocą css i zaimplementować niektóre zdarzenia js (gotowe / sprawdzone). Chodzi o to, aby domyślna recaptcha była „niewidoczna” i umieszczona nad nią przycisk. Po prostu zmień identyfikator recaptcha i to wszystko.
Więcej informacji można znaleźć pod adresem https://azentreprise.org/read.php?id=1 .
źródło
Właśnie dodam tego rodzaju rozwiązanie / szybką poprawkę, aby nie zgubić się w przypadku zerwanego łącza.
Link do tego rozwiązania „Chcę dodać link Jak zmienić rozmiar Google noCAPTCHA reCAPTCHA | The Geek Goddess” został dostarczony przez Vikram Singh Saini i po prostu wyjaśnia, że można użyć wbudowanego CSS, aby wymusić umieszczanie ramek w ramkach iframe.
źródło
Możesz także wybrać ciemny lub jasny motyw ReCaptcha. Użyłem tego w jednej z moich aplikacji Angular 8
źródło
Natknąłem się na tę odpowiedź, próbując stylizować ReCaptcha v2 na witrynę, która ma tryb jasny i ciemny. Bawił się trochę bardziej i odkrył, że oprócz
transform
,filter
stosuje się również doiframe
elementów tak skończył przy użyciu domyślnego / światło Odśwież i robi to, gdy użytkownik jest w trybie ciemnym:hue-rotate(180deg)
Czyni go tak, że logo jest jeszcze niebieski i check-mark jest jeszcze zielona, gdy użytkownik kliknie go, zachowując białyinvert()
„ed do czerni i vice versa.Nie widziałem tego w żadnej odpowiedzi ani komentarzu, więc postanowiłem udostępnić, nawet jeśli jest to stary wątek.
źródło
Możesz użyć w swojej witrynie stylów CSS dla Google reCAPTCHA v2 :
- Zmień tło, kolor widżetu Google reCAPTCHA v2:
lub
- Zmień rozmiar widżetu Google reCAPTCHA v2 za pomocą tego fragmentu:
- Reaguj na Google reCAPTCHA v2:
Wszystkie elementy, własność CSS powyżej, to tylko w celach informacyjnych. Możesz je zmienić samodzielnie (tylko za pomocą selektora klas CSS).
Zapoznaj się z blogiem OIW - Jak edytować CSS Google reCAPTCHA (zmiana stylu, zmiana pozycji, zmiana rozmiaru plakietki reCAPTCHA)
Możesz także sprawdzić styl Google reCAPTCHA v3.
źródło