Je n'ai pas eu beaucoup de succès pour trouver comment styliser le nouveau recaptcha (v2) de Google. Le but final est de le rendre réactif, mais j'ai du mal à appliquer le style même pour des choses simples comme la largeur.

Leur documentation API ne semble pas donner de détails sur la façon de contrôler le style autre que le paramètre de thème , et les solutions CSS et JavaScript simples n'ont pas fonctionné pour moi.

Fondamentalement, je dois pouvoir appliquer CSS à la nouvelle version de Google de reCaptcha. L'utilisation de JavaScript est acceptable.

Aperçu:

Désolé d'être le répondeur des mauvaises nouvelles, mais après recherche et débogage, il est assez clair qu'il n'y a aucun moyen de personnaliser le style des nouveaux contrôles reCAPTCHA. Les contrôles sont enveloppés dans un iframe, ce qui empêche l'utilisation de CSS pour les styliser, et la politique de même origine empêche JavaScript d'accéder au contenu, excluant même une solution piratée.

Pourquoi pas d'API de personnalisation?:

Contrairement à l' API reCAPTCHA version 1.0 , il n'y a pas d'options de personnalisation dans l' API version 2.0 . Si nous considérons le fonctionnement de cette nouvelle API, il n'est pas surprenant de savoir pourquoi.

Extrait de Êtes-vous un robot? Présentation de «No CAPTCHA reCAPTCHA» :

Bien que la nouvelle API reCAPTCHA puisse sembler simple, il y a un haut degré de sophistication derrière cette modeste case à cocher. Les CAPTCHA se sont longtemps appuyés sur l'incapacité des robots à résoudre le texte déformé. Cependant, nos recherches ont récemment montré que la technologie d'intelligence artificielle d'aujourd'hui peut résoudre même la variante la plus difficile du texte déformé avec une précision de 99,8%. Ainsi, le texte déformé, à lui seul, n'est plus un test fiable.

Pour contrer cela, nous avons développé l'année dernière un backend d'analyse avancée des risques pour reCAPTCHA qui considère activement l'engagement complet d'un utilisateur avec le CAPTCHA - avant, pendant et après - pour déterminer si cet utilisateur est un humain. Cela nous permet de moins nous fier à la saisie de texte déformé et, à son tour, d'offrir une meilleure expérience aux utilisateurs. Nous en avons parlé dans notre article sur la Saint-Valentin plus tôt cette année.

Si vous pouviez manipuler directement le style des éléments de contrôle, vous pourriez facilement interférer avec la logique de profilage utilisateur qui rend possible le nouveau reCAPTCHA.

Qu'en est-il d'un thème personnalisé?:

Maintenant, la nouvelle API offre une themeoption , par laquelle vous pouvez choisir un thème prédéfini tel que lightet dark. Cependant, il n'existe actuellement aucun moyen de créer un thème personnalisé. Si nous inspectons le iframe, nous trouverons que le themenom est passé dans la chaîne de requête de l' srcattribut. Cette URL ressemble à ce qui suit.

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

Ce paramètre détermine le nom de classe CSS utilisé sur l'élément wrapper dans iframeet détermine le thème prédéfini à utiliser.

En fouillant dans la source minified, je trouve qu'il ya effectivement 4 valeurs thématiques valides, ce qui est plus que les 2 figurant dans la documentation, mais defaultet standardsont les mêmes que light.

Nous pouvons voir le code qui sélectionne le nom de classe de cet objet ici.

Il n'y a pas de code pour un thème personnalisé, et si une autre themevaleur est spécifiée, il utilisera le standardthème.

En conclusion:

À l'heure actuelle, il n'y a aucun moyen de iframestyliser complètement les nouveaux éléments reCAPTCHA, seuls les éléments enveloppants autour du peuvent être stylisés. Cela a été presque certainement fait intentionnellement, pour empêcher les utilisateurs de casser la logique de profilage de l'utilisateur qui rend possible la nouvelle case à cocher sans captcha. Il est possible que Google puisse implémenter une API de thème personnalisé limitée, vous permettant peut-être de choisir des couleurs personnalisées pour les éléments existants, mais je ne m'attendrais pas à ce que Google implémente un style CSS complet.

Comme les gars mentionnés ci-dessus, il n'y a aucun moyen de guichet automatique. mais toujours si quelqu'un est intéressé, alors en ajoutant seulement deux lignes, vous pouvez au moins le rendre raisonnable, s'il se brise sur n'importe quel écran. vous pouvez attribuer une valeur différente dans la requête @media.

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

J'espère que cela aide n'importe qui :-).

Malheureusement, nous ne pouvons pas styler reCaptcha v2, mais il est possible de lui donner un meilleur aspect, voici le code:

Cliquez ici pour un aperçu

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

Ajoutez une propriété de taille de données à l'élément google recaptcha et rendez-le égal à "compact" dans le cas d'un mobile.

Référez-vous: google recaptcha docs

J'utilise l'astuce ci-dessous pour le rendre réactif et supprimer les bordures. ces astuces peuvent masquer le message / erreur de recaptcha.

Ce style est pour rtl lang mais vous pouvez le changer facilement.

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

Ce que vous pouvez faire est de cacher le contrôle ReCaptcha derrière un div. Ensuite, faites votre style sur ce div. Et définissez le css "pointer-events: none" dessus, afin que vous puissiez cliquer sur le div ( cliquez sur un DIV vers les éléments sous-jacents ).

La case à cocher doit être dans un endroit où l'utilisateur clique.

Vous pouvez recréer recaptcha, l'envelopper dans un conteneur et ne laisser la case à cocher visible. Mon principal problème était que je ne pouvais pas prendre toute la largeur, alors maintenant, elle s'étend à la largeur du conteneur. Le seul problème est l'expiration, vous pouvez voir un film mais dès que cela arrive, je le réinitialise.

Voir cette démo 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>

Génial! Maintenant, voici le style disponible pour reCaptcha .. J'utilise juste un style en ligne comme:

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

tout ce que vous voulez faire, petite personnalisation dans un style en ligne ...

J'espère que cela vous aidera !!

Il suffit d'ajouter une solution hack-ish pour la rendre réactive.

Enveloppez le recaptcha dans un div supplémentaire:

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

Ajoutez des styles. Cela suppose le thème sombre.

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

Cela donne ce qui suit:

Il sera maintenant redimensionné horizontalement et n'a pas de bordure. Le logo recaptcha serait coupé à droite, donc je le cache avec une bordure à droite. Cela masque également les liens de confidentialité et de conditions, vous pouvez donc les rajouter.

J'ai essayé de définir une hauteur sur l'élément wrapper, puis de centrer verticalement le recaptcha pour réduire la hauteur. Malheureusement, toute combinaison de débordement: caché et une hauteur plus petite semble tuer l'iframe.

dans la V2.0, ce n'est pas possible. L'iframe bloque tout style hors de cela. Il est difficile d'ajouter un thème personnalisé au lieu du thème sombre ou clair.

Avec l'intégration du reCAPTCHA invisible, vous pouvez effectuer les opérations suivantes:

Pour activer le reCAPTCHA invisible, plutôt que de placer les paramètres dans un div, vous pouvez les ajouter directement à un bouton html.

une. data-callback = ””. Cela fonctionne comme la case à cocher captcha, mais est requis pour invisible.

b. data-badge: Cela vous permet de repositionner le badge reCAPTCHA (c'est-à-dire le logo et le texte «protégé par reCAPTCHA»). Options valides comme «bottomright» (par défaut), «bottomleft» ou «inline» qui placera le badge directement au-dessus du bouton. Si vous créez le badge en ligne, vous pouvez contrôler directement le CSS du badge.

Au cas où quelqu'un aurait du mal avec la recaptcha du formulaire de contact 7 (wordpress), voici une solution qui fonctionne pour moi

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

Tard à la fête, mais peut-être que ma solution aidera quelqu'un.

Je n'ai trouvé aucune solution qui fonctionne sur un site Web réactif lorsque la fenêtre change ou que la mise en page est fluide.

J'ai donc créé un script jQuery pour django-cms qui s'adapte dynamiquement à une fenêtre changeante. Je vais mettre à jour cette réponse dès que j'aurai besoin d'une variante moderne de celle-ci, plus modulaire et sans dépendance 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;

Si quelqu'un est toujours intéressé, il existe une simple bibliothèque javascript (sans dépendance jQuery), nommée recaptcha personnalisé. Il vous permet de personnaliser le bouton avec css et d'implémenter certains événements js (prêt / vérifié). L'idée est de rendre le recaptcha par défaut "invisible" et de placer un bouton dessus. Changez simplement l'identifiant du recaptcha et c'est tout.

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

Voir https://azentreprise.org/read.php?id=1 pour plus d'informations.

J'ajoute simplement ce genre de solution / solution rapide pour ne pas se perdre en cas de lien cassé.

Lien vers cette solution "Vous voulez ajouter un lien Comment redimensionner le Google noCAPTCHA reCAPTCHA | The Geek Goddess" a  été fourni par Vikram Singh Saini et décrit simplement que vous pouvez utiliser le CSS en ligne pour imposer le cadrage de l'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>

Vous pouvez également choisir entre un thème ReCaptcha sombre ou clair . J'ai utilisé ceci dans l'une de mes applications Angular 8

Je suis tombé sur cette réponse en essayant de styliser le ReCaptcha v2 pour un site qui a un mode clair et un mode sombre. J'ai joué un peu plus et j'ai découvert qu'en outre transform, il filterest également appliqué aux iframeéléments, ce qui a fini par utiliser le ReCaptcha par défaut / clair et le faire lorsque l'utilisateur est en mode sombre:

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

Le hue-rotate(180deg)fait en sorte que le logo soit toujours bleu et que la coche soit toujours verte lorsque l'utilisateur clique dessus, tout en gardant le blanc invert()au noir et vice versa.

Je n'ai vu cela dans aucune réponse ou commentaire, alors j'ai décidé de partager même s'il s'agit d'un ancien fil de discussion.

Vous pouvez utiliser du CSS pour le style Google reCAPTCHA v2 sur votre site Web:

- Changer l'arrière-plan, la couleur du widget Google reCAPTCHA v2:

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

ou

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

- Redimensionnez le widget Google reCAPTCHA v2 en utilisant cet extrait de code:

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

- Réagissez à votre Google reCAPTCHA v2:

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

Tous les éléments, propriété de CSS ci-dessus, juste pour votre référence. Vous pouvez les modifier vous-même (uniquement en utilisant le sélecteur de classe CSS).

Référez-vous au blog OIW - Comment modifier le CSS de Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)

Vous pouvez également y découvrir le style de Google reCAPTCHA v3.