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.
javascript
css
captcha
recaptcha
jhawes
quelle
quelle
Antworten:
Ü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“ :
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 bietet
theme
die neue API eine Option , mit der Sie ein voreingestelltes Thema wielight
und auswählen könnendark
. Derzeit gibt es jedoch keine Möglichkeit, ein benutzerdefiniertes Thema zu erstellen. Wenn wir das überprüfeniframe
, werden wir feststellen, dass dertheme
Name in der Abfragezeichenfolge dessrc
Attributs übergeben wird. Diese URL sieht ungefähr so aus.Dieser Parameter bestimmt, welcher CSS-Klassenname für das Wrapper-Element im verwendet wird,
iframe
und 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
default
undstandard
sind die gleichen wielight
.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
theme
Wert angegeben wird, wird dasstandard
Thema verwendet.Abschließend:
Derzeit gibt es keine Möglichkeit, die neuen reCAPTCHA-Elemente vollständig zu formatieren,
iframe
sondern 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.quelle
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.
Hoffe das hilft jedem :-).
quelle
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
quelle
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
quelle
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.
quelle
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.
quelle
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
quelle
Toll! Jetzt ist hier Styling für reCaptcha verfügbar. Ich verwende nur Inline-Styling wie:
Was auch immer Sie tun möchten, kleine Anpassungen im Inline-Stil vornehmen ...
Hoffe es wird dir helfen !!
quelle
Fügen Sie einfach eine hackige Lösung hinzu, um sie reaktionsschnell zu machen.
Wickeln Sie die Recaptcha in ein zusätzliches Div:
Stile hinzufügen. Dies setzt das dunkle Thema voraus.
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.
quelle
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.
quelle
Mit der Integration des unsichtbaren reCAPTCHA können Sie Folgendes tun:
quelle
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
quelle
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
CSS
js
quelle
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.
Weitere Informationen finden Sie unter https://azentreprise.org/read.php?id=1 .
quelle
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.
quelle
Sie können auch zwischen einem dunklen oder hellen ReCaptcha-Thema wählen . Ich habe dies in einer meiner Angular 8-Apps verwendet
quelle
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
,filter
auch angewandt wirdiframe
Elemente so am Ende mit dem Standard / Licht ReCaptcha und dies zu tun , wenn der Benutzer im dunklen Modus ist: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.
quelle
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:
oder
- Ändern Sie die Größe des Google reCAPTCHA v2-Widgets mithilfe dieses Snippets:
- Reagieren Sie auf Ihr Google reCAPTCHA v2:
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.
quelle