Autovervollständigungsstile in WebKit-Browsern ändern

Wir erhielten einen netten Tipp von Lydia Dugger per E-Mail mit einer Methode, um die Stile zu ändern, die WebKit-Browser auf Formularfelder anwenden, die automatisch ausgefüllt wurden.

Was wir mit Autocomplete meinen

Viele Browser (darunter Chrome und Safari) bieten eine Einstellung, die es Benutzern ermöglicht, Details für gängige Formularfelder automatisch auszufüllen. Das haben Sie bestimmt schon bemerkt, wenn Sie ein Formular ausgefüllt haben, das nach Angaben wie Name, Adresse und E-Mail fragt.

Der Haken ist, dass Benutzer diese Einstellung aktiviert haben müssen, damit dieser Snippet wirksam ist. Wenn die Einstellung aktiviert ist, werden WebKit-Browser die Felder, die sie für den Benutzer automatisch ausgefüllt hat, wie folgt stylen:

Bemerken Sie, wie die automatisch ausgefüllten Felder einen gelben Hintergrund haben? Darauf beziehen wir uns und werden wir mit diesem Snippet ändern.

Der Snippet

Wir können die Pseudo-Klasse -webkit-autofill verwenden, um diese Felder anzusprechen und sie nach Belieben zu stylen. Das Standard-Styling beeinflusst nur die Hintergrundfarbe, aber die meisten anderen Eigenschaften wie border und font-size gelten hier. Wir können sogar die Farbe des Textes mit -webkit-text-fill-color ändern, was im folgenden Snippet enthalten ist.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Demo

Sehen Sie den Pen Autocomplete-Stile in WebKit ändern von CSS-Tricks (@css-tricks) auf CodePen.