Ich habe nicht viel Erfolg damit gehabt, Googles neues Recaptcha (v2) zu stylen. Das letztendliche Ziel ist es, es reaktionsschnell zu machen, aber ich habe Schwierigkeiten, das Styling auch für einfache Dinge wie die Breite anzuwenden.

Die API-Dokumentation scheint keine Einzelheiten zur Steuerung des Stils außer dem Theme- Parameter zu enthalten, und einfache CSS- und JavaScript-Lösungen haben bei mir nicht funktioniert.

Grundsätzlich muss ich in der Lage sein, CSS auf Googles neue Version von reCaptcha anzuwenden. Die Verwendung von JavaScript ist akzeptabel.

Überblick:

Es tut uns leid, der Antwortende auf schlechte Nachrichten zu sein, aber nach Recherchen und Debugging ist es ziemlich klar, dass es keine Möglichkeit gibt, das Design der neuen reCAPTCHA-Steuerelemente anzupassen. Die Steuerelemente sind in a eingeschlossen iframe, wodurch die Verwendung von CSS zum Formatieren verhindert wird , und die Same-Origin-Richtlinie verhindert, dass JavaScript auf den Inhalt zugreift , und schließt sogar eine hackige Lösung aus.

Warum keine API anpassen?:

Im Gegensatz zu reCAPTCHA API Version 1.0 gibt es in API Version 2.0 keine Anpassungsoptionen . Wenn wir uns überlegen, wie diese neue API funktioniert, ist es keine Überraschung, warum.

Auszug aus Sind Sie ein Roboter? Einführung von „No CAPTCHA reCAPTCHA“ :

Während die neue reCAPTCHA-API einfach klingt, steckt hinter diesem bescheidenen Kontrollkästchen ein hohes Maß an Raffinesse. CAPTCHAs verlassen sich seit langem auf die Unfähigkeit von Robotern, verzerrten Text zu lösen. Unsere kürzlich durchgeführten Untersuchungen haben jedoch gezeigt, dass die heutige Technologie der künstlichen Intelligenz selbst die schwierigste Variante von verzerrtem Text mit einer Genauigkeit von 99,8% lösen kann. Daher ist verzerrter Text für sich genommen kein verlässlicher Test mehr.

Um dem entgegenzuwirken, haben wir im vergangenen Jahr ein erweitertes Backend für die Risikoanalyse für reCAPTCHA entwickelt, das die gesamte Beschäftigung eines Benutzers mit CAPTCHA - vor, während und nach - aktiv berücksichtigt, um festzustellen, ob dieser Benutzer ein Mensch ist. Dies ermöglicht es uns, uns weniger auf die Eingabe von verzerrtem Text zu verlassen und den Benutzern eine bessere Benutzererfahrung zu bieten. Wir haben darüber in unserem Valentinstagspost Anfang dieses Jahres gesprochen.

Wenn Sie das Design der Steuerelemente direkt manipulieren könnten, könnten Sie leicht die Benutzerprofilerstellungslogik stören, die das neue reCAPTCHA ermöglicht.

Was ist mit einem benutzerdefinierten Thema?:

Jetzt bietettheme die neue API eine Option , mit der Sie ein voreingestelltes Thema wie lightund auswählen können dark. Derzeit gibt es jedoch keine Möglichkeit, ein benutzerdefiniertes Thema zu erstellen. Wenn wir das überprüfen iframe, werden wir feststellen, dass der themeName in der Abfragezeichenfolge des srcAttributs übergeben wird. Diese URL sieht ungefähr so ​​aus.

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

Dieser Parameter bestimmt, welcher CSS-Klassenname für das Wrapper-Element im verwendet wird, iframeund bestimmt das zu verwendende voreingestellte Thema.

Graben durch die minimierte Quelle, fand ich , dass es tatsächlich 4 gültige Thema Werte sind, die als die in der Dokumentation aufgeführten 2 mehr ist, aber defaultund standardsind die gleichen wie light.

Hier sehen wir den Code, der den Klassennamen aus diesem Objekt auswählt.

Es gibt keinen Code für ein benutzerdefiniertes Thema. Wenn ein anderer themeWert angegeben wird, wird das standardThema verwendet.

Abschließend:

Derzeit gibt es keine Möglichkeit, die neuen reCAPTCHA-Elemente vollständig zu formatieren, iframesondern nur die Wrapper-Elemente um das Element herum können stilisiert werden. Dies wurde mit ziemlicher Sicherheit absichtlich getan, um zu verhindern, dass Benutzer die Benutzerprofilerstellungslogik brechen, die das neue Kontrollkästchen ohne Captcha ermöglicht. Es ist möglich, dass Google eine eingeschränkte API für benutzerdefinierte Designs implementiert, mit der Sie möglicherweise benutzerdefinierte Farben für vorhandene Elemente auswählen können. Ich würde jedoch nicht erwarten, dass Google das vollständige CSS-Design implementiert.

Wie oben erwähnt, gibt es keinen Geldautomaten. Wenn Sie jedoch interessiert sind, können Sie durch Hinzufügen von nur zwei Zeilen zumindest das Erscheinungsbild vernünftig gestalten, wenn es auf einem Bildschirm unterbrochen wird. Sie können in der @ media-Abfrage einen anderen Wert zuweisen.

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

Hoffe das hilft jedem :-).

Leider können wir reCaptcha v2 nicht stylen, aber es ist möglich, dass es besser aussieht. Hier ist der Code:

Klicken Sie hier, um eine Vorschau anzuzeigen

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

Fügen Sie dem Google Recaptcha-Element eine Datengrößeneigenschaft hinzu und machen Sie sie im Falle eines Mobilgeräts gleich "kompakt".

Siehe: Google Recaptcha Docs

Ich benutze den folgenden Trick, um darauf zu reagieren und Ränder zu entfernen. Diese Tricks verbergen möglicherweise die Recaptcha-Nachricht / den Fehler.

Dieser Stil ist für rtl lang, aber Sie können ihn einfach ändern.

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

Was Sie tun können, ist das ReCaptcha-Steuerelement hinter einem Div zu verstecken. Dann machen Sie Ihr Styling auf diesem Div. Und setzen Sie das CSS "Zeiger-Ereignisse: keine" darauf, damit Sie durch das Div klicken können ( Klicken Sie durch ein DIV zu den zugrunde liegenden Elementen ).

Das Kontrollkästchen sollte sich an einer Stelle befinden, auf die der Benutzer klickt.

Sie können recaptcha neu erstellen, in einen Container einwickeln und nur das Kontrollkästchen sichtbar lassen. Mein Hauptproblem war, dass ich nicht die volle Breite nehmen konnte, so dass es jetzt auf die Containerbreite erweitert wird. Das einzige Problem ist der Ablauf, den Sie sehen können, aber sobald es passiert, setze ich es zurück.

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

Toll! Jetzt ist hier Styling für reCaptcha verfügbar. Ich verwende nur Inline-Styling wie:

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

Was auch immer Sie tun möchten, kleine Anpassungen im Inline-Stil vornehmen ...

Hoffe es wird dir helfen !!

Fügen Sie einfach eine hackige Lösung hinzu, um sie reaktionsschnell zu machen.

Wickeln Sie die Recaptcha in ein zusätzliches Div:

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

Stile hinzufügen. Dies setzt das dunkle Thema voraus.

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

Dies ergibt Folgendes:

Die Größe wird jetzt horizontal geändert und es wird kein Rand angezeigt. Das Recaptcha-Logo wird rechts abgeschnitten, daher verstecke ich es mit einem rechten Rand. Außerdem werden die Links zu Datenschutz und Begriffen ausgeblendet, sodass Sie diese möglicherweise wieder hinzufügen möchten.

Ich habe versucht, eine Höhe für das Wrapper-Element festzulegen und dann die Recaptcha vertikal zu zentrieren, um die Höhe zu verringern. Leider scheint jede Kombination von Überlauf: versteckt und eine geringere Höhe den Iframe zu töten.

in der V2.0 ist das nicht möglich. Der Iframe blockiert das gesamte Styling. Es ist schwierig, ein benutzerdefiniertes Thema anstelle des dunklen oder hellen hinzuzufügen.

Mit der Integration des unsichtbaren reCAPTCHA können Sie Folgendes tun:

Um Invisible reCAPTCHA zu aktivieren, anstatt die Parameter in ein div zu setzen, können Sie sie direkt zu einer HTML-Schaltfläche hinzufügen.

ein. Datenrückruf = ””. Dies funktioniert genau wie das Kontrollkästchen Captcha, ist jedoch für unsichtbar erforderlich.

b. Datenausweis: Hiermit können Sie den reCAPTCHA-Ausweis neu positionieren (dh Logo und Text 'geschützt durch reCAPTCHA'). Gültige Optionen wie "bottomright" (Standardeinstellung), "bottomleft" oder "inline", mit denen das Abzeichen direkt über der Schaltfläche platziert wird. Wenn Sie den Ausweis inline machen, können Sie das CSS des Ausweises direkt steuern.

Für den Fall, dass jemand mit der Wiederaufnahme des Kontaktformulars 7 (WordPress) zu kämpfen hat, ist hier eine Lösung für mich

.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ät zur Party, aber vielleicht hilft meine Lösung jemandem.

Ich habe keine Lösung gefunden, die auf einer reaktionsfähigen Website funktioniert, wenn sich das Ansichtsfenster ändert oder das Layout flüssig ist.

Deshalb habe ich ein jQuery-Skript für django-cms erstellt, das sich dynamisch an ein sich änderndes Ansichtsfenster anpasst. Ich werde diese Antwort aktualisieren, sobald ich eine moderne Variante davon benötige, die modularer ist und keine jQuery-Abhängigkeit aufweist.

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;

Wenn noch jemand interessiert ist, gibt es eine einfache Javascript-Bibliothek (keine jQuery-Abhängigkeit) mit dem Namen custom recaptcha. Sie können die Schaltfläche mit CSS anpassen und einige js-Ereignisse implementieren (bereit / aktiviert). Die Idee ist, das Standard-Recaptcha "unsichtbar" zu machen und einen Knopf darüber zu legen. Ändern Sie einfach die ID des Recaptcha und fertig.

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

Weitere Informationen finden Sie unter https://azentreprise.org/read.php?id=1 .

Ich füge nur diese Art von Lösung / Schnellkorrektur hinzu, damit sie bei einem defekten Link nicht verloren geht.

Link zu dieser Lösung " Link hinzufügen So ändern Sie die Größe von Google noCAPTCHA reCAPTCHA | The Geek Goddess"  wurde von Vikram Singh Saini bereitgestellt und beschreibt lediglich, dass Sie Inline-CSS verwenden können, um das Framing des Iframes zu erzwingen.

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

Sie können auch zwischen einem dunklen oder hellen ReCaptcha-Thema wählen . Ich habe dies in einer meiner Angular 8-Apps verwendet

Ich bin auf diese Antwort gestoßen, als ich versucht habe, ReCaptcha v2 für eine Site mit hellem und dunklem Modus zu gestalten. Rumgespielt einig mehr und entdeckt , dass neben transform, filterauch angewandt wird iframeElemente so am Ende mit dem Standard / Licht ReCaptcha und dies zu tun , wenn der Benutzer im dunklen Modus ist:

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

Das hue-rotate(180deg)macht es so, dass das Logo immer noch blau und das Häkchen immer noch grün ist, wenn der Benutzer darauf klickt, während Weiß invert()auf Schwarz und umgekehrt bleibt .

Ich habe dies in keiner Antwort oder in keinem Kommentar gesehen und habe mich daher entschlossen, es zu teilen, auch wenn dies ein alter Thread ist.

Sie können CSS für das Google reCAPTCHA v2- Styling auf Ihrer Website verwenden:

- Ändern Sie den Hintergrund und die Farbe des Google reCAPTCHA v2-Widgets:

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

oder

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

- Ändern Sie die Größe des Google reCAPTCHA v2-Widgets mithilfe dieses Snippets:

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

- Reagieren Sie auf Ihr Google reCAPTCHA v2:

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

Alle Elemente, Eigenschaft von CSS oben, dienen nur als Referenz. Sie können sie selbst ändern (nur mit der CSS-Klassenauswahl).

Weitere Informationen finden Sie im OIW-Blog - Bearbeiten von CSS von Google reCAPTCHA (Neu formatieren, Position ändern, Größe des reCAPTCHA-Abzeichens ändern)

Dort finden Sie auch das Styling von Google reCAPTCHA v3.