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

Wenn Sie es ganz loswerden möchten, habe ich den Code in den vorherigen Antworten angepasst, sodass er auch bei Hover, Aktivierung und Fokus funktioniert:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px weiß einsetzen;
}

Answer 2

Die einzige Lösung, die in meinem Fall funktioniert hat:

:-webkit-autofill {
  -webkit-text-fill-color: #000; /* ok für Text, kein Hack */
  transition-property: background-color; /* beginne Hack für Hintergrund... */
  transition-delay: 100000s; /* ...beende Hack für Hintergrund */
}

Diese Lösung ist nicht ideal, es ist nur ein Übergang, bis etwas Besseres gefunden wird ...

Answer 3

Hinzufügen von autocomplete="off" wird nicht ausreichen.

Ändern Sie das Eingabetyp-Attribut in type="search".
Google wendet kein automatisches Ausfüllen auf Eingaben mit dem Typ "search" an.

Hoffentlich spart Ihnen das etwas Zeit.

Answer 4

fareed namrouti Antwort ist korrekt. Aber der Hintergrund wird immer noch gelb, wenn die Eingabe ausgewählt ist. Das Hinzufügen von !important behebt das Problem. Wenn du auch textarea und select mit dem gleichen Verhalten haben möchtest, füge einfach textarea:-webkit-autofill, select:-webkit-autofill hinzu

Nur Eingabe

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Eingabe, Auswahl, Textbereich

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Answer 5

Versuchen Sie diesen Code:

    $(function(){
        setTimeout(function(){
            $('[name=user_password]').attr('type', 'password');
        }, 1000);
    });