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

Sie können die Stile der Eingabefelder sowie die Textstile innerhalb der input Box:

Hier können Sie eine beliebige Farbe verwenden, z. B. white , #DDD , rgba(102, 163, 177, 0.45) .

Aber transparent wird hier nicht funktionieren.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Außerdem können Sie damit die Textfarbe ändern:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Ratschläge: Verwenden Sie keinen übermäßigen Unschärferadius, der in die Hunderte oder Tausende geht. Dies hat keinen Nutzen und kann den Prozessor schwächerer mobiler Geräte belasten. (Das gilt auch für tatsächliche, äußere Schatten). Für ein normales Eingabefeld von 20px Höhe, 30px "blur Radius" wird perfekt decken.

Answer 2

Ich habe eine bessere Lösung.

Das Einstellen des Hintergrunds auf eine andere Farbe wie unten löste das Problem für mich nicht, da ich ein transparentes Eingabefeld benötigte

-webkit-box-shadow: 0 0 0px 1000px white inset;

Also habe ich ein paar andere Dinge ausprobiert und bin zu diesem Ergebnis gekommen:

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

Answer 3

Die bisherige Lösung, einen Kastenschatten hinzuzufügen, funktioniert gut für Personen, die einen einfarbigen Hintergrund benötigen. Die andere Lösung, einen Übergang hinzuzufügen, funktioniert, aber wenn man eine Dauer/Verzögerung festlegt, kann es sein, dass er irgendwann wieder erscheint.

Meine Lösung ist, stattdessen Keyframes zu verwenden, so dass immer die von Ihnen gewählten Farben angezeigt werden.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Beispiel Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Answer 4

Um einen transparenten Hintergrund zu haben, ohne eine Zeitverzögerung zu verwenden (besonders notwendig in modernen Webanwendungen, bei denen die Benutzer die Nutzung für eine Weile unterbrechen können und ein vorhersehbares Verhalten der Oberfläche wünschen), verwenden Sie dies:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

body {
  background: lightblue;
}

input {
  background: transparent;
}

input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
}

<input type="text" name="email" />
<input type="text" name="email" class="no-autofill-bkg" />

Arbeitet an: Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

Wenn Sie sich entschließen, meine Lösung erneut zu veröffentlichen, bitte ich Sie nur, meinen Namen oder einen Link zu dieser Seite anzugeben.

Answer 5

Aktualisierung 2022

Funktioniert seit dem Update 2022:

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}