Entfernen der Hintergrundfarbe von Eingaben für die Chrome-Autovervollständigung?

Question

In einem Formular, an dem ich gerade arbeite, füllt Chrome die Felder für E-Mail und Kennwort automatisch aus. Das ist in Ordnung, aber Chrome ändert die Hintergrundfarbe in ein helles Gelb.

Das Design, an dem ich arbeite, verwendet hellen Text auf dunklem Hintergrund, so dass dies das Aussehen des Formulars wirklich durcheinander bringt - ich habe starke gelbe Kästchen und fast unsichtbaren weißen Text. Sobald das Feld fokussiert ist, werden die Felder wieder normal angezeigt.

Ist es möglich, Chrome davon abzuhalten, die Farbe dieser Felder zu ändern?

Answer 1

Dies ist meine Lösung, ich habe einen Übergang und eine Übergangsverzögerung verwendet, damit ich einen transparenten Hintergrund auf meinen Eingabefeldern haben kann.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

Answer 2

Dies wurde so konzipiert, da diese Färbung Verhalten von WebKit gewesen ist. Es ermöglicht dem Benutzer zu verstehen, dass die Daten vorausgefüllt wurden. Fehler 1334

Sie können die automatische Vervollständigung deaktivieren, indem Sie (oder auf dem spezifischen Formularsteuerelement:

<form autocomplete="off">
...
</form

Sie können aber auch die Farbe der automatischen Ausfüllung ändern, indem Sie dies tun:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Beachten Sie, dass es einen Fehler gibt, der verfolgt wird, damit dies wieder funktioniert: http://code.google.com/p/chromium/issues/detail?id=46543

Dies ist ein WebKit-Verhalten.

Answer 3

Ein möglicher Ausweg besteht darin, einen "starken" Innenschatten zu setzen:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Answer 4

Nach 2 Stunden Suche scheint es, dass Google die gelbe Farbe immer noch irgendwie überschreibt, aber ich habe die Lösung dafür gefunden. Das ist richtig. es wird für Hover, Fokus usw. als auch arbeiten. alles, was Sie tun müssen, ist hinzufügen !important zu ihm.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Dadurch wird Gelb aus den Eingabefeldern vollständig entfernt.

Answer 5

Versuchen Sie dies, um den Autofill-Stil auszublenden

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
}