Stylizacja ReCaptcha API v2

110

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.

jhawes
źródło
Mam ten sam sukces :(
Petroff
9
Możliwość zastosowania niestandardowego CSS do nowej reCaptcha v2 firmy Google, wydanej dopiero w grudniu ubiegłego roku, i działa we wszystkich nowoczesnych przeglądarkach na komputery stacjonarne i urządzenia mobilne (i IE8, nawet jeśli to jakiś hack).
Alex Beardsley
2
@skobaljic Zobacz mój powyższy komentarz. Celem tego pytania jest uzyskanie odpowiedzi dla wszystkich programistów, jak zastosować DOWOLNĄ stylizację. Nie ma nic na temat responsywności.
Alex Beardsley
4
Oto skrzypce pokazujące problem. jsfiddle.net/slicedtoad/GVwZ4/4 Zasadniczo, ponieważ captcha znajduje się w międzydomenowej ramce iframe, nie może być stylizowana za pomocą css ani js. A ref API nie wyjaśnia, jak utworzyć niestandardowy motyw. Niezależnie od tego, czy istnieje hackerskie rozwiązanie, powinno ono prawdopodobnie zostać przesłane do modułu śledzenia problemów.
DanielST
2
@AlexBeardsley Jednak zasada pojedynczego źródła odpowiedzialna za blokowanie edycji elementów iframe jest środkiem bezpieczeństwa przeglądarki służącym do ochrony użytkowników . Wyłączenie jest dość łatwe. A gdybyś był botem, przede wszystkim nie używałbyś przeglądarki.
DanielST

Odpowiedzi:

150

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

Chociaż nowy interfejs API reCAPTCHA może wydawać się prosty, za tym skromnym polem wyboru kryje się wysoki stopień wyrafinowania. CAPTCHA od dawna polegają na niezdolności robotów do rozwiązywania zniekształconego tekstu. Jednak nasze badania wykazały niedawno, że dzisiejsza technologia sztucznej inteligencji może rozwiązać nawet najtrudniejszy wariant zniekształconego tekstu z dokładnością 99,8%. Tak więc zniekształcony tekst nie jest już sam w sobie niezawodnym testem.

Aby temu przeciwdziałać, w zeszłym roku opracowaliśmy zaplecze zaawansowanej analizy ryzyka dla reCAPTCHA, które aktywnie bierze pod uwagę całe zaangażowanie użytkownika w CAPTCHA - przed, w trakcie i po - w celu ustalenia, czy ten użytkownik jest człowiekiem. Dzięki temu możemy mniej polegać na pisaniu zniekształconego tekstu, a co za tym idzie, oferować użytkownikom lepsze wrażenia. Rozmawialiśmy o tym w naszym walentynkowym poście na początku tego roku.

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 themeopcję , za pomocą której możesz wybrać gotowy motyw, taki jak lighti dark. Jednak obecnie nie ma sposobu na utworzenie niestandardowego motywu. Jeśli sprawdzimy iframe, stwierdzimy, że themenazwa jest przekazywana w ciągu zapytania srcatrybutu. Ten adres URL wygląda mniej więcej tak.

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

Ten parametr określa, jaka nazwa klasy CSS jest używana w elemencie opakowania w iframei określa predefiniowany motyw do użycia.

nazwa klasy elementu

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 defaulti standardsą takie same jak light.

przedmiot zajęć

Widzimy tutaj kod, który wybiera nazwę klasy z tego obiektu.

kod wyboru klasy

Nie ma kodu dla motywu niestandardowego, a jeśli themezostanie określona jakakolwiek inna wartość, użyje standardmotywu.

Podsumowując:

Obecnie nie ma możliwości pełnego iframewystylizowania 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.

Alexander O'Mara
źródło
1
To potwierdza to, co znalazłem Alexandra ... była moja początkowa frustracja z powodu nowego reCAPTCHA, ale wygląda na to, że obecnie nie ma na to sposobu :(
jhawes
8
Chcesz dodać link Jak zmienić rozmiar Google noCAPTCHA reCAPTCHA | The Geek Goddess , gdzie autor podzielił się sztuczką, dzięki której Captcha v2 reaguje.
Vikram Singh Saini
byłoby miło mieć przynajmniej sposób na określenie koloru tła i tekstu,
My1
1
Dalej do tematów. Możesz zażądać motywu w onCallback: <script type = "text / javascript"> var onloadCallback = function () {grecaptcha.render ('your_recaptcha_div_id', {'sitekey': 'your_site_key', theme: 'dark' <= =========================}); }; </script>
Przyjdź
52

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.

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

Mam nadzieję, że to pomoże każdemu :-).

bańka
źródło
Możesz dostosować skalę do tego, co wygląda najlepiej dla danego układu. Właściwość transform-origin jest dodawana, ponieważ użycie właściwości transform nie powoduje zmiany rzeczywistej przestrzeni zajmowanej przez element. To tylko podstawowy sposób, aby pokazać, jak szybko zmienić rozmiar reCAPTCHA dzięki stylizacji liniowej. Aby uzyskać coś ładniejszego, sugerowałbym przypisanie nowej klasy i pozostawienie jej w pełnym rozmiarze dla czegokolwiek powyżej mobilnego, a następnie użycie zapytania o media, aby zmienić ją na mniejszy rozmiar. Jeszcze lepiej byłoby użyć efektu przejścia, aby wizualnie „kurczył się”, gdy korzystasz z telefonu komórkowego.
Gray Ayer
3
Będziesz także chciał użyć reguł specyficznych dla przeglądarki, ponieważ iPhone'y 5 nie rozpoznają tylko „transformacji”, jak się wydaje: -ms-transform: scale (0.815); -webkit-transform: skala (0,815); -moz-transform: skala (0,815); -o-transformacja: skala (0,815); transform: skala (0,815); -ms-transform-origin: left top; -webkit-transform-origin: od lewej do góry; -moz-transform-origin: lewy górny; -o-transform-origin: left top; transform-origin: left top;
Grey Ayer
8

Niestety nie możemy stylizować reCaptcha v2, ale można to poprawić, oto kod:

Kliknij tutaj, aby wyświetlić podgląd

.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
źródło
Nie dotyczy awaryjnego elementu iframe recaptcha dla użytkowników mobilnych z przeglądarkami bez JS.
andreszs
8

Dodaj właściwość rozmiaru danych do elementu google recaptcha i ustaw ją jako „kompaktową” w przypadku telefonu komórkowego.

Zobacz: Google recaptcha docs

Sumit Maingi
źródło
5

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

.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 no captcha reponsive style trick

Ahmad Dehnavi
źródło
4

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.

Magu
źródło
4

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

wprowadź opis obrazu tutaj

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
źródło
3
Twój link jest uszkodzony
NaveenDA,
Najwyraźniej Codepen usunął go bez mojej zgody. Nie jestem pewien, czy może to naruszyć zasady Codepen / Google.
alejandro
3

Wspaniały! Teraz dostępne są style dla reCaptcha. Po prostu używam stylów wbudowanych, takich jak:

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

cokolwiek chcesz zrobić, małe modyfikacje w stylizacji inline ...

Mam nadzieję, że to ci pomoże !!

Anileweb
źródło
2

Wystarczy dodać hakerskie rozwiązanie, aby było responsywne.

Zawiń recaptcha w dodatkowy div:

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

Dodaj style. Zakłada to ciemny motyw.

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

Daje to:

Recaptcha

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.

kthornbloom
źródło
właśnie wypróbowałem swój styl, ale wydaje mi się, że nie działa. -> jsfiddle.net/GVwZ4/31
My1
2

w wersji 2.0 nie jest to możliwe. Element iframe blokuje wszystkie style. Trudno jest dodać niestandardowy motyw zamiast ciemnego lub jasnego.

Yacine
źródło
2

Dzięki integracji niewidocznego reCAPTCHA możesz wykonać następujące czynności:

Aby włączyć Invisible reCAPTCHA, zamiast umieszczać parametry w div, możesz dodać je bezpośrednio do przycisku HTML.

za. data-callback = ””. Działa to tak samo jak captcha pola wyboru, ale jest wymagane dla niewidocznego.

b. data-badge: umożliwia zmianę położenia znaczka reCAPTCHA (tj. logo i tekstu „chronione przez reCAPTCHA”). Prawidłowe opcje to „bottomright” (domyślnie), „bottomleft” lub „inline”, co spowoduje umieszczenie plakietki bezpośrednio nad przyciskiem. Jeśli umieścisz odznakę w tekście, możesz bezpośrednio kontrolować CSS plakietki.

Sebastian Hagens
źródło
1
Podczas tworzenia plakietki w tekście, jak bezpośrednio kontrolować CSS odznaki?
Jianxin Gao
2

W przypadku, gdy ktoś boryka się z recaptcha formularza kontaktowego 7 (wordpress) tutaj jest rozwiązanie działające dla mnie

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

wprowadź opis obrazu tutaj

Ouahib Abdallah
źródło
1

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

<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
źródło
0

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.

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

Więcej informacji można znaleźć pod adresem https://azentreprise.org/read.php?id=1 .

TheDreamer979
źródło
0

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.

// 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>
lampart
źródło
0

Możesz także wybrać ciemny lub jasny motyw ReCaptcha. Użyłem tego w jednej z moich aplikacji Angular 8

wintersa
źródło
0

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, filterstosuje się również do iframeelementów tak skończył przy użyciu domyślnego / światło Odśwież i robi to, gdy użytkownik jest w trybie ciemnym:

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

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ły invert()„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.

asontu
źródło
-1

Możesz użyć w swojej witrynie stylów CSS dla Google reCAPTCHA v2 :

- Zmień tło, kolor widżetu Google reCAPTCHA v2:

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

lub

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

- Zmień rozmiar widżetu Google reCAPTCHA v2 za pomocą tego fragmentu:

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

- Reaguj na Google reCAPTCHA v2:

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

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.

OIW
źródło
Zakres CSS obejmuje tylko ten sam dokument. Element iframe to cały dokument sam w sobie, więc reguła CSS, która ma zastosowanie do strony zawierającej ten element iframe, nie może mieć zastosowania do strony znajdującej się w tym elemencie iframe.
sandes