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.

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.

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.

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

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.

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

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>

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

Zobacz: Google recaptcha docs

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>

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.

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

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>

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

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:

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.

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

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.

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

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;

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 .

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>

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

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.

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.