Style de l'API ReCaptcha v2

110

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.

jhawes
la source
J'ai le même succès :(
Petroff
9
Pouvoir appliquer un CSS personnalisé au nouveau reCaptcha v2 de Google, sorti en décembre dernier, et le faire fonctionner dans tous les navigateurs de bureau et mobiles modernes (et IE8 même s'il s'agit d'un piratage).
Alex Beardsley
2
@skobaljic S'il vous plaît voir mon commentaire ci-dessus. Le but de cette question est d'obtenir une réponse pour tous les développeurs sur la façon d'appliquer N'IMPORTE QUEL style, point final. Rien concernant la réactivité.
Alex Beardsley
4
Voici un violon montrant le problème. jsfiddle.net/slicedtoad/GVwZ4/4 Fondamentalement, comme le captcha est dans une iframe interdomaine, il ne peut pas être stylé avec css ou js. Et la référence API n'explique pas comment créer un thème personnalisé. Indépendamment de l'existence ou non d'une solution piratée, celle-ci devrait probablement être soumise dans le suivi des problèmes.
DanielST
2
@AlexBeardsley Mais la politique d'origine unique responsable du blocage de l'édition des iframes est une mesure de sécurité du navigateur pour protéger les utilisateurs . C'est assez facile à désactiver. Et si vous étiez un robot, vous n'utiliseriez pas de navigateur en premier lieu.
DanielST

Réponses:

150

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.

nom de classe d'élément

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.

objet de cours

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

classe choisissant le code

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.

Alexander O'Mara
la source
1
Cela confirme ce que j'ai trouvé Alexander ... était ma frustration initiale avec le nouveau reCAPTCHA, mais il semble qu'il n'y ait tout simplement pas de moyen de contourner cela actuellement :(
jhawes
8
Vous voulez ajouter un lien Comment redimensionner le Google noCAPTCHA reCAPTCHA | The Geek Goddess , où l'auteur a partagé l'astuce pour rendre Captcha v2 responsive.
Vikram Singh Saini
serait bien d'avoir au moins un moyen de spécifier la couleur du fond et du texte,
My1
1
Suite aux thèmes. Vous pouvez demander le thème dans le onCallback: <script type = "text / javascript"> var onloadCallback = function () {grecaptcha.render ('your_recaptcha_div_id', {'sitekey': 'your_site_key', theme: 'dark' <= ==========================}); }; </script>
ComeIn
52

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

bubb
la source
Vous pouvez ajuster l'échelle à ce qui convient le mieux à votre disposition particulière. La propriété transform-origin est ajoutée car lorsque vous utilisez la propriété transform, elle ne change pas l'espace réel occupé par l'élément. C'est juste une façon basique de montrer comment vous pouvez changer rapidement la taille du reCAPTCHA avec un style en ligne. Pour quelque chose de plus agréable, je suggérerais d'attribuer une nouvelle classe et de la laisser à sa taille réelle pour tout ce qui est au-dessus du mobile, puis d'utiliser une requête multimédia pour la changer en taille plus petite. Il serait encore mieux d'utiliser un effet de transition pour qu'il «diminue» visuellement lorsque vous passez au mobile.
Gray Ayer
3
Vous voudrez également utiliser les règles spécifiques au navigateur, car les iphones 5 ne reconnaissent pas simplement "transformer" il semble: -ms-transform: scale (0.815); -webkit-transform: échelle (0,815); -moz-transform: échelle (0,815); -o-transformée: échelle (0,815); transformée: échelle (0,815); -ms-transform-origin: en haut à gauche; -webkit-transform-origin: en haut à gauche; -moz-transform-origin: en haut à gauche; -o-transform-origin: en haut à gauche; transform-origin: en haut à gauche;
Gray Ayer
8

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>
Tom Chan
la source
Ne s'applique pas à l'iframe recaptcha de secours pour les utilisateurs mobiles avec des navigateurs non JS.
andreszs
8

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

Sumit Maingi
la source
5

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>

recaptcha no captcha reponsive style trick

Ahmad Dehnavi
la source
4

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.

Magu
la source
4

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

entrez la description de l'image ici

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
la source
3
Votre lien est rompu
NaveenDA
Apparemment, Codepen l'a enlevé sans mon consentement. Je ne sais pas si cela pourrait enfreindre une politique Codepen / Google.
alejandro
3

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

Anileweb
la source
2

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:

Recaptcha

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.

képine
la source
juste essayé votre style, ne semble pas fonctionner pour moi. -> jsfiddle.net/GVwZ4/31
My1
2

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.

Yacine
la source
2

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.

Sebastian Hagens
la source
1
Lors de la création du badge en ligne, comment contrôler directement le CSS du badge?
Jianxin Gao
2

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

entrez la description de l'image ici

Ouahib Abdallah
la source
1

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;
nirazul
la source
0

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.

TheDreamer979
la source
0

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>
léopold
la source
0

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

wintersa
la source
0

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.

asontu
la source
-1

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.

OIW
la source
Le CSS n'est limité qu'au sein du même document. Une iframe est un document entier à part entière, et donc une règle CSS qui s'applique à la page qui contient cette iframe ne peut pas s'appliquer à la page qui se trouve dans cette iframe.
sandes