Google Chrome Formular-Autofill und sein gelber Hintergrund

Question

Ich habe ein Designproblem mit Google Chrome und seiner Formular-Ausfüllfunktion. Wenn Chrome sich an einige Anmeldeinformationen erinnert, ändert es die Hintergrundfarbe in Gelb.

Hier sind einige Screenshots:

Wie kann man diesen Hintergrund entfernen oder einfach diese Autofill-Funktion deaktivieren?

Answer 1

Der folgende CSS entfernt die gelbe Hintergrundfarbe und ersetzt sie durch eine Hintergrundfarbe Ihrer Wahl. Es deaktiviert nicht das automatische Ausfüllen und erfordert keine jQuery- oder Javascript-Hacks.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Ändern Sie die Farbe in Ihre eigene Hintergrundfarbe */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*Ihr box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Lösung kopiert von: Überschreiben des automatischen Ausfüllens des Browsers und der Eingabe-Hervorhebung mit HTML/CSS

Answer 2

Hat für mich funktioniert, nur die CSS-Änderung erforderlich.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

Sie können anstelle von #ffffff jede Farbe einsetzen.

Answer 3

Ein bisschen trickreich, aber funktioniert perfekt für mich

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 4

Eine Kombination von Antworten hat für mich funktioniert

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

Answer 5

Dies hat mir geholfen, eine reine CSS-Version.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px weißen Einschub; }

wo weiß jede gewünschte Farbe sein kann.