Wir haben von Lydia Dugger per E-Mail einen netten Tipp mit einer Methode zum Ändern der Stile erhalten, die WebKit-Browser auf Formularfelder anwenden, die automatisch ausgefüllt wurden.
Was wir unter Autocomplete verstehen
Viele Browser (einschließlich Chrome und Safari) bieten eine Einstellung, mit der Benutzer automatisch Details für allgemeine Formularfelder eingeben können. Sie haben dies beim Ausfüllen eines Formulars gesehen, in dem Sie nach Namen, Adresse und E-Mail-Adresse gefragt werden.
Der Haken ist, dass Benutzer diese Einstellung aktiviert haben müssen, damit dieses Snippet wirksam wird. Wenn die Einstellung aktiviert ist, formatieren WebKit-Browser die Felder, die automatisch für den Benutzer ausgefüllt wurden, wie folgt:
Beachten Sie, wie die automatisch ausgefüllten Felder einen gelben Hintergrund haben? Darauf beziehen wir uns und werden uns mit diesem Ausschnitt ändern.
Das Snippet
Wir können den -webkit-autofillPseudo-Selektor verwenden, um auf diese Felder abzuzielen und sie nach Belieben zu formatieren. Das Standard-Styling wirkt sich nur auf die Hintergrundfarbe aus, aber die meisten anderen Eigenschaften gelten hier, wie z. B. borderund font-size. Wir können sogar die Farbe des Textes ändern, der -webkit-text-fill-colorim 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
Siehe die Autocomplete-Stile zum Ändern des Stifts in WebKit mit CSS-Tricks (@ css-Tricks) auf CodePen.