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

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Answer 2

Alle oben genannten Antworten funktionierten, hatten aber auch ihre Schwächen. Der folgende Code ist eine Verschmelzung von zwei der oben genannten Antworten, die einwandfrei und ohne Blinken funktioniert.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

Answer 3

Ich hatte ein Problem, bei dem ich box-shadow nicht verwenden konnte, weil ich das Eingabefeld transparent machen musste. Es ist ein bisschen ein Hack, aber reine CSS. Stellen Sie den Übergang auf eine sehr lange Zeitspanne ein.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

Answer 4

Das Hinzufügen einer einstündigen Verzögerung würde alle CSS-Änderungen am Eingabeelement unterbrechen.
Dies ist besser als das Hinzufügen von Übergangsanimationen oder inneren Schatten.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Answer 5

Versuchen Sie dies: Dasselbe wie bei @ Nathan-weiß obige Antwort mit geringfügigen Anpassungen.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}