In einem Formular, an dem ich arbeite, füllt Chrome die E-Mail- und Kennwortfelder automatisch aus. Dies ist in Ordnung, Chrome ändert jedoch die Hintergrundfarbe in eine hellgelbe Farbe.
Das Design, an dem ich arbeite, verwendet hellen Text auf einem dunklen Hintergrund, so dass das Aussehen des Formulars wirklich durcheinander gebracht wird - ich habe stark gelbe Kästchen und nahezu unsichtbaren weißen Text. Sobald das Feld fokussiert ist, kehren die Felder zur Normalität zurück.
Ist es möglich, Chrome daran zu hindern, die Farbe dieser Felder zu ändern?
autocomplete
input
google-chrome
DisgruntledGoat
quelle
quelle
Antworten:
Dies funktioniert einwandfrei. Sie können die Eingabefeldstile sowie die Textstile im Eingabefeld ändern:
Hier können Sie eine beliebige Farbe zB verwenden
white
,#DDD
,rgba(102, 163, 177, 0.45)
.Funktioniert hier aber
transparent
nicht.Darüber hinaus können Sie damit die Textfarbe ändern:
Hinweis: Verwenden Sie keinen übermäßigen Unschärferadius zu Hunderten oder Tausenden. Dies hat keinen Vorteil und kann zu einer Prozessorbelastung schwächerer mobiler Geräte führen. (Gilt auch für tatsächliche Außenschatten). Bei einem normalen Eingabefeld mit einer Höhe von 20 Pixel wird es durch einen Unschärferadius von 30 Pixel perfekt abgedeckt.
quelle
:-internal-autofill-previewed
und:-internal-autofill-selected
Pseudoklassen anstelle von-webkit-autofill
... Auf mysteriöse Weise-webkit-autofill
funktioniert es jedoch immer noch. Ich persönlich brauchte das nicht!important
.Die vorherigen Lösungen zum Hinzufügen eines Kastenschattens eignen sich gut für Personen, die einen einfarbigen Hintergrund benötigen. Die andere Lösung zum Hinzufügen eines Übergangs funktioniert, aber wenn Sie eine Dauer / Verzögerung einstellen müssen, wird dies möglicherweise irgendwann wieder angezeigt.
Meine Lösung besteht darin, stattdessen Keyframes zu verwenden, damit immer die Farben Ihrer Wahl angezeigt werden.
Beispiel Codepen: https://codepen.io/-Steve-/pen/dwgxPB
quelle
color: inherit
Ich habe eine bessere Lösung.
Das Einstellen des Hintergrunds auf eine andere Farbe wie unten hat das Problem für mich nicht gelöst, da ich ein transparentes Eingabefeld benötigte
Also habe ich einige andere Dinge ausprobiert und mir Folgendes ausgedacht:
quelle
-webkit-text-fill-color: yellow !important;
.display
. Geige - Check it outtransition-duration
lächerlich hoch zu setzen, wäre es besser, dastransition-delay
stattdessen zu setzen . Auf diese Weise reduzieren Sie die Möglichkeit von Farbänderungen noch weiter.transition
Hack funktioniert nur, wenn die Eingabe nicht automatisch mit einem vom Browser aufgezeichneten Standardeintrag gefüllt wird. Andernfalls bleibt der gelbe Hintergrund erhalten.background-color
nicht? Chrome muss das beheben !!Dies ist meine Lösung. Ich habe Übergang und Übergangsverzögerung verwendet, daher kann ich einen transparenten Hintergrund für meine Eingabefelder haben.
quelle
box-shadow
zur Validierung"color 9999s ease-out, background-color 9999s ease-out";
ist nicht valide Ausdruck. Ich habe damals Code verwendet-webkit-transition: background-color 9999s ease-out;
und-webkit-text-fill-color: #fff !important;
box-shadow
Validierung funktioniert ? In meinem Fall wird aufgrund dieser CSS-Regel mein benutzerdefinierter roter Box-Schatten (der auf einen Eingabefehler hinweist) verzögert, sodass der Benutzer glaubt, dass die letzte Eingabe ungültig ist, obwohl sie tatsächlich gut ist.Dies ist wie geplant, da dieses Farbverhalten von WebKit stammt. Dadurch kann der Benutzer verstehen, dass die Daten vorab ausgefüllt wurden. Fehler 1334
Sie können die automatische Vervollständigung deaktivieren, indem Sie Folgendes tun (oder das spezifische Formularsteuerelement aktivieren):
Oder Sie können die Farbe der automatischen Füllung ändern, indem Sie Folgendes tun:
Beachten Sie, dass ein Fehler verfolgt wird, damit dies wieder funktioniert: http://code.google.com/p/chromium/issues/detail?id=46543
Dies ist ein WebKit-Verhalten.
quelle
!important
und (b) mit einer ID für eine höhere Spezifität ausgerichtet ist. Es sieht so aus, als würde Chrome es immer überschreiben. Das Entfernen der automatischen Vervollständigung scheint zu funktionieren, aber es ist wirklich nicht das, was ich tun möchte.autocomplete="off"
wird sicherlich Probleme mit der Barrierefreiheit aufwerfen. Warum ist diese Antwort überhaupt als richtig markiert?Eine mögliche Problemumgehung für den Moment besteht darin, einen "starken" Innenschatten zu setzen:
quelle
Versuchen Sie dies, um den automatischen Füllstil auszublenden
quelle
SASS
quelle
Alle oben genannten Antworten funktionierten, hatten aber ihre Fehler. Der folgende Code ist eine Zusammenführung von zwei der oben genannten Antworten, die einwandfrei funktioniert, ohne zu blinken.
quelle
Nach 2 Stunden Suche scheint es, dass Google die gelbe Farbe immer noch irgendwie überschreibt, aber ich für die Lösung dafür. Das stimmt. Es funktioniert auch für Hover, Fokus usw. Alles, was Sie tun müssen, ist hinzuzufügen! Wichtig.
Dadurch wird Gelb vollständig aus den Eingabefeldern entfernt
quelle
Außerdem:
Vielleicht möchten Sie auch hinzufügen
Andernfalls wird die gelbe Farbe wieder angezeigt, wenn Sie auf die Eingabe klicken. Wenn Sie für den Fokus Bootstrap verwenden, ist der zweite Teil für den Rand, der 0 0 8px rgba (82, 168, 236, 0.6) hervorhebt.
So dass es wie jede Bootstrap-Eingabe aussieht.
quelle
Ich hatte ein Problem, bei dem ich Box-Shadow nicht verwenden konnte, weil das Eingabefeld transparent sein musste. Es ist ein bisschen ein Hack, aber reines CSS. Stellen Sie den Übergang auf einen sehr langen Zeitraum ein.
quelle
transition-duration
lächerlich hoch zu setzen, wäre es besser, dastransition-delay
stattdessen zu setzen . Auf diese Weise reduzieren Sie die Möglichkeit von Farbänderungen noch weiter.Das Hinzufügen einer Stunde Verzögerung würde alle CSS-Änderungen am Eingabeelement anhalten.
Dies ist besser, als Übergangsanimationen oder innere Schatten hinzuzufügen.
quelle
Versuchen Sie Folgendes: Wie oben bei der Antwort von @ Nathan-white mit geringfügigen Änderungen.
quelle
Wenn Sie die Autocomplete-Funktionalität beibehalten möchten, können Sie mit jQuery das Styling von Chrome entfernen. Ich habe hier einen kurzen Beitrag darüber geschrieben: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
quelle
Ich habe eine andere Lösung mit JavaScript ohne JQuery entwickelt. Wenn Sie dies nützlich finden oder meine Lösung erneut veröffentlichen möchten, bitte ich Sie nur, meinen Namen anzugeben. Genießen. - Daniel Fairweather
Dieser Code basiert auf der Tatsache, dass Google Chrome den Webkit-Stil entfernt, sobald zusätzlicher Text eingegeben wird. Das einfache Ändern des Eingabefeldwerts reicht nicht aus, Chrome möchte ein Ereignis. Indem wir uns auf jedes Eingabefeld (Text, Passwort) konzentrieren, können wir ein Tastaturereignis (den Buchstaben 'a') senden und dann den Textwert auf den vorherigen Status (den automatisch ausgefüllten Text) setzen. Beachten Sie, dass dieser Code in jedem Browser ausgeführt wird und jedes Eingabefeld auf der Webseite überprüft und entsprechend Ihren Anforderungen anpasst.
quelle
Ich habe eine reine CSS-Lösung, die CSS-Filter verwendet.
Der Graustufenfilter ersetzt das Gelb durch Grau, dann entfernt die Helligkeit das Grau.
SIEHE CODEPEN
quelle
Dies funktioniert für Eingabe, Textbereich und Auswahl in Normal-, Schwebe-, Fokus- und aktiven Zuständen.
Hier ist die SCSS-Version der oben genannten Lösung für diejenigen, die mit SASS / SCSS arbeiten.
quelle
Für diejenigen, die Compass verwenden:
quelle
Ich gebe auf!
Da es keine Möglichkeit gibt, die Farbe der Eingabe mit Autocomplete zu ändern, entscheide ich mich, alle mit jQuery für Webkit-Browser zu deaktivieren. So was:
quelle
Ich habe eine Lösung, wenn Sie verhindern möchten, dass das automatische Ausfüllen von Google Chrome ausgeführt wird, es jedoch ein wenig "machete" ist. Entfernen Sie einfach die Klasse, die Google Chrome zu diesen Eingabefeldern hinzufügt, und setzen Sie den Wert auf "", wenn Sie dies nicht anzeigen müssen Daten nach dem Laden speichern.
quelle
Die Lösung von Daniel Fairweather ( Entfernen der eingegebenen Hintergrundfarbe für die automatische Vervollständigung von Chrome? ) (Ich würde seine Lösung gerne verbessern, benötige aber immer noch 15 Wiederholungen) funktioniert wirklich gut. Es gibt einen wirklich großen Unterschied zu den meisten optimierten Lösungen: Sie können Hintergrundbilder behalten! Aber eine kleine Modifikation (nur Chrome Check)
Und Sie müssen bedenken, dass es NUR auf sichtbaren Feldern funktioniert !
Wenn Sie also $ .show () für Ihr Formular verwenden, müssen Sie diesen Code After show () ausführen
Meine vollständige Lösung (ich habe eine Ein- / Ausblendschaltfläche für das Anmeldeformular):
Entschuldigung nochmal, ich würde es vorziehen, wenn es ein Kommentar wäre.
Wenn Sie möchten, kann ich einen Link zu der Site setzen, auf der ich ihn verwendet habe.
quelle
und das hat bei mir funktioniert (Chrome 76 getestet)
quelle
Ich habe fast alle oben genannten Lösungen ausprobiert. Bei mir funktioniert nichts. Endlich mit dieser Lösung gearbeitet. Ich hoffe jemand hilft dabei.
quelle
Danke Benjamin!
Die Mootools-Lösung ist etwas kniffliger, da ich mit der Verwendung keine Felder abrufen kann.
$('input:-webkit-autofill')
Ich habe also Folgendes verwendet:quelle
Keine der Lösungen hat bei mir funktioniert, der eingefügte Schatten funktioniert bei mir nicht, da die Eingaben einen durchscheinenden Hintergrund haben, der über dem Seitenhintergrund liegt.
Also fragte ich mich: "Wie bestimmt Chrome, was auf einer bestimmten Seite automatisch ausgefüllt werden soll?"
"Sucht es nach Eingabe-IDs, Eingabenamen? Formular-IDs? Formularaktion?"
Durch meine Experimente mit dem Benutzernamen und den Passworteingaben gab es nur zwei Möglichkeiten, die dazu führten, dass Chrome die Felder, die automatisch ausgefüllt werden sollten, nicht finden konnte:
1) Stellen Sie die Passworteingabe vor die Texteingabe. 2) Geben Sie ihnen den gleichen Namen und die gleiche ID ... oder überhaupt keinen Namen und keine ID.
Nach dem Laden der Seite können Sie mit Javascript entweder die Reihenfolge der Eingaben auf der Seite dynamisch ändern oder ihnen dynamisch ihren Namen und ihre ID geben ...
Und Chrome weiß nicht, was es getroffen hat ... Autocomplete ist kaputt!
Verrückter Hack, ich weiß. Aber es funktioniert für mich.
Chrome 34.0.1847.116, OSX 10.7.5
quelle
Leider hat 2016 (ein paar Jahre nach der Frage) keine der oben genannten Lösungen für mich funktioniert.
Hier ist die aggressive Lösung, die ich verwende:
Grundsätzlich wird das Tag beim Speichern des Werts gelöscht, neu erstellt und der Wert zurückgesetzt.
quelle
ich benutze das. arbeite für mich. Entfernen Sie den gelben Hintergrund des Feldes.
quelle
Wie bereits erwähnt, funktioniert Inset-Webkit-Box-Shadow für mich am besten.
Code-Snippet zum Ändern der Textfarbe:
quelle
Das hat bei mir funktioniert:
quelle