We kregen een leuke tip van Lydia Dugger via e-mail met een methode om de stijlen te wijzigen die WebKit-browsers toepassen op formuliervelden die automatisch zijn ingevuld.
Wat we bedoelen met automatisch aanvullen
Veel browsers (inclusief Chrome en Safari) bieden een instelling waarmee gebruikers automatisch details voor veelvoorkomende formuliervelden kunnen invullen. Je hebt dit gezien bij het invullen van een formulier waarin om zaken als naam, adres en e-mailadres wordt gevraagd.
De vangst is dat gebruikers deze instelling moeten hebben ingeschakeld om dit fragment effectief te laten zijn. Als de instelling is ingeschakeld, zullen WebKit-browsers de velden die het automatisch heeft ingevuld voor de gebruiker, als volgt opmaken:
Merk op dat de automatisch aangevulde velden een gele achtergrond hebben? Daar verwijzen we naar en gaan we veranderen met dit fragment.
Het fragment
We kunnen de -webkit-autofillpseudo-selector gebruiken om die velden te targeten en ze naar eigen inzicht op te maken. De standaardstijl heeft alleen invloed op de achtergrondkleur, maar de meeste andere eigenschappen zijn hier van toepassing, zoals borderen font-size. We kunnen zelfs de kleur van de tekst wijzigen met behulp van -webkit-text-fill-colordie is opgenomen in het onderstaande fragment.
/* 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
Zie de Pen Change Autocomplete Styles in WebKit door CSS-Tricks (@ css-tricks) op CodePen.