Non ho avuto molto successo nel trovare come modellare il nuovo recaptcha di Google (v2). L'obiettivo finale è renderlo reattivo, ma ho difficoltà ad applicare lo stile anche per cose semplici come la larghezza.

La loro documentazione API non sembra fornire alcuna specifica su come controllare lo stile se non il parametro del tema e le semplici soluzioni CSS e JavaScript non hanno funzionato per me.

Fondamentalmente, devo essere in grado di applicare CSS alla nuova versione di reCaptcha di Google. L'uso di JavaScript con esso è accettabile.

Panoramica:

Mi dispiace essere il risponditore di cattive notizie, ma dopo la ricerca e il debug, è abbastanza chiaro che non c'è modo di personalizzare lo stile dei nuovi controlli reCAPTCHA. I controlli sono racchiusi in un iframe, che impedisce l'uso di CSS per definirli, e la stessa politica di origine impedisce a JavaScript di accedere ai contenuti, escludendo anche una soluzione hacky.

Perché nessuna API personalizzata ?:

A differenza di reCAPTCHA API versione 1.0 , non ci sono opzioni di personalizzazione in API versione 2.0 . Se consideriamo come funziona questa nuova API, non sorprende il motivo.

Estratto da Sei un robot? Presentazione di "No CAPTCHA reCAPTCHA" :

Sebbene la nuova API reCAPTCHA possa sembrare semplice, c'è un alto grado di sofisticazione dietro quella modesta casella di controllo. I CAPTCHA fanno affidamento a lungo sull'incapacità dei robot di risolvere il testo distorto. Tuttavia, la nostra ricerca ha recentemente dimostrato che la tecnologia odierna di intelligenza artificiale può risolvere anche la variante più difficile di testo distorto con una precisione del 99,8%. Il testo distorto, di per sé, non è più un test affidabile.

Per contrastare questo problema, l'anno scorso abbiamo sviluppato un back-end di analisi dei rischi avanzata per reCAPTCHA che considera attivamente l'intero coinvolgimento di un utente con il CAPTCHA, prima, durante e dopo, per determinare se quell'utente è un essere umano. Ciò ci consente di fare meno affidamento sulla digitazione di testo distorto e, a sua volta, di offrire una migliore esperienza agli utenti. Ne abbiamo parlato nel nostro post di San Valentino all'inizio di quest'anno.

Se fossi in grado di manipolare direttamente lo stile degli elementi di controllo, potresti facilmente interferire con la logica di profilazione dell'utente che rende possibile il nuovo reCAPTCHA.

Che dire di un tema personalizzato ?:

Ora la nuova API offre themeun'opzione , con la quale puoi scegliere un tema preimpostato come lighte dark. Tuttavia, attualmente non esiste un modo per creare un tema personalizzato. Se esaminiamo il iframe, troveremo che il themenome è passato nella stringa di query srcdell'attributo. Questo URL ha un aspetto simile al seguente.

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

Questo parametro determina quale nome di classe CSS viene utilizzato sull'elemento wrapper in iframee determina il tema predefinito da utilizzare.

Scavando nella fonte minimizzata, ho scoperto che in realtà ci sono 4 valori di tema validi, che sono più dei 2 elencati nella documentazione, ma defaulte standardsono gli stessi di light.

Possiamo vedere il codice che seleziona il nome della classe da questo oggetto qui.

Non esiste un codice per un tema personalizzato e, se themeviene specificato un altro valore, verrà utilizzato il standardtema.

In conclusione:

Al momento, non è iframepossibile applicare uno stile completo ai nuovi elementi reCAPTCHA, solo gli elementi wrapper attorno a possono essere stilizzati. Questo è stato quasi certamente fatto intenzionalmente, per impedire agli utenti di rompere la logica di profilazione degli utenti che rende possibile la nuova casella di controllo senza captcha. È possibile che Google possa implementare un'API di temi personalizzati limitata, magari permettendoti di scegliere colori personalizzati per gli elementi esistenti, ma non mi aspetto che Google implementi lo stile CSS completo.

Come i ragazzi menzionati sopra, non c'è modo ATM. ma comunque se qualcuno è interessato, aggiungendo solo due righe puoi almeno farlo sembrare ragionevole, se si rompe su qualsiasi schermo. puoi assegnare un valore diverso nella query @media.

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

Spero che questo aiuti chiunque :-).

Sfortunatamente non possiamo stile reCaptcha v2, ma è possibile farlo sembrare migliore, ecco il codice:

Fare clic qui per visualizzare l'anteprima

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

Aggiungi una proprietà data-size all'elemento google recaptcha e rendilo uguale a "compact" in caso di dispositivo mobile.

Fare riferimento a: Google recaptcha docs

Uso il trucco di seguito per renderlo reattivo e rimuovere i bordi. questo trucco potrebbe nascondere il messaggio / errore di recaptcha.

Questo stile è per rtl lang ma puoi cambiarlo facilmente.

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

Quello che puoi fare è nascondere il controllo ReCaptcha dietro un div. Quindi crea il tuo stile su questo div. E imposta il css "pointer-events: none" su di esso, in modo da poter fare clic attraverso il div (fare clic su un DIV per gli elementi sottostanti ).

La casella di controllo dovrebbe trovarsi in un punto in cui l'utente fa clic.

Puoi ricreare recaptcha, avvolgerlo in un contenitore e lasciare visibile solo la casella di controllo. Il mio problema principale era che non potevo prendere l'intera larghezza, quindi ora si espande alla larghezza del contenitore. L'unico problema è la scadenza si può vedere un colpo ma appena accade lo resetto.

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

Grande! Ora ecco lo stile disponibile per reCaptcha .. Uso solo stili in linea come:

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

qualunque cosa tu voglia fare, piccola personalizzazione nello stile in linea ...

Spero che ti possa aiutare !!

Basta aggiungere una soluzione hack-ish per renderlo reattivo.

Avvolgi il recaptcha in un div extra:

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

Aggiungi stili. Questo assume il tema oscuro.

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

Questo produce quanto segue:

Ora verrà ridimensionato orizzontalmente e non ha un bordo. Il logo recaptcha verrebbe tagliato a destra, quindi lo nascondo con un bordo destro. Nasconde anche i collegamenti alla privacy e ai termini, quindi potresti aggiungerli di nuovo.

Ho tentato di impostare un'altezza sull'elemento wrapper, quindi centrare verticalmente il recaptcha per ridurre l'altezza. Sfortunatamente, qualsiasi combinazione di overflow: nascosto e un'altezza inferiore sembra uccidere l'iframe.

nella V2.0 non è possibile. L'iframe blocca tutti gli stili fuori da questo. È difficile aggiungere un tema personalizzato invece di quello scuro o chiaro.

Con l'integrazione dell'invisibile reCAPTCHA puoi fare quanto segue:

Per abilitare ReCAPTCHA invisibile, invece di inserire i parametri in un div, puoi aggiungerli direttamente a un pulsante html.

un. Dati-callback =””. Funziona proprio come il captcha della casella di controllo, ma è necessario per invisibile.

b. data-badge: questo ti permette di riposizionare il badge reCAPTCHA (cioè il logo e il testo "protetto da reCAPTCHA"). Opzioni valide come "bottomright" (impostazione predefinita), "bottomleft" o "inline" che posizioneranno il badge direttamente sopra il pulsante. Se rendi il badge in linea, puoi controllare direttamente il CSS del badge.

Nel caso in cui qualcuno abbia problemi con il recaptcha del modulo di contatto 7 (wordpress), ecco una soluzione che funziona per me

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

In ritardo alla festa, ma forse la mia soluzione aiuterà qualcuno.

Non ho trovato alcuna soluzione che funzioni su un sito Web reattivo quando il viewport cambia o il layout è fluido.

Quindi ho creato uno script jQuery per django-cms che si adatta dinamicamente a un viewport che cambia. Aggiornerò questa risposta non appena avrò bisogno di una sua variante moderna che sia più modulare e non abbia dipendenze 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;

Se qualcuno è ancora interessato, esiste una semplice libreria javascript (nessuna dipendenza jQuery), denominata recaptcha personalizzato. Ti consente di personalizzare il pulsante con css e implementare alcuni eventi js (pronti / controllati). L'idea è di rendere il recaptcha predefinito "invisibile" e mettere un pulsante su di esso. Basta cambiare l'id del recaptcha e il gioco è fatto.

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

Vedere https://azentreprise.org/read.php?id=1 per ulteriori informazioni.

Sto solo aggiungendo questo tipo di soluzione / correzione rapida in modo che non si perda in caso di collegamento interrotto.

Link a questa soluzione "Vuoi aggiungere un collegamento Come ridimensionare Google noCAPTCHA reCAPTCHA | The Geek Goddess" è  stato fornito da Vikram Singh Saini e descrive semplicemente che potresti utilizzare CSS in linea per applicare l'inquadratura dell'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>

Puoi anche scegliere tra un tema ReCaptcha scuro o chiaro . L'ho usato in una delle mie app Angular 8

Mi sono imbattuto in questa risposta cercando di modellare ReCaptcha v2 per un sito che ha una modalità chiara e una scura. Ho giocato ancora un po 'e ho scoperto che transform, inoltre , filterviene applicato anche agli iframeelementi, quindi ho finito per utilizzare il ReCaptcha predefinito / leggero e farlo quando l'utente è in modalità oscura:

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

Il hue-rotate(180deg)fa in modo che il logo sia ancora blu e il segno di spunta sia ancora verde quando l'utente fa clic su di esso, mantenendo il bianco invert()e il nero e viceversa.

Non l'ho visto in nessuna risposta o commento, quindi ho deciso di condividerlo anche se si tratta di un vecchio thread.

Puoi utilizzare alcuni CSS per lo stile di Google reCAPTCHA v2 sul tuo sito web:

- Cambia sfondo, colore del widget Google reCAPTCHA v2:

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

o

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

- Ridimensiona il widget Google reCAPTCHA v2 utilizzando questo snippet:

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

- Reattiva il tuo Google reCAPTCHA v2:

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

Tutti gli elementi, proprietà del CSS sopra che è solo per riferimento. Puoi modificarli da solo (solo usando il selettore di classe CSS).

Fare riferimento al blog OIW - Come modificare CSS di Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)

Puoi anche scoprire lo stile di Google reCAPTCHA v3 lì.