Am primit un sfat frumos de la Lydia Dugger prin e-mail cu o metodă de modificare a stilurilor pe care browserele WebKit le aplică câmpurilor de formular care au fost completate automat.
Ce înțelegem prin completare automată
Multe browsere (inclusiv Chrome și Safari) oferă o setare care permite utilizatorilor să completeze automat detalii pentru câmpurile de formular comune. Ați văzut acest lucru atunci când completați un formular care solicită lucruri precum numele, adresa și e-mailul.
Problema este că utilizatorii trebuie să aibă activată această setare pentru ca acest fragment să fie eficient. Dacă setarea este activată, atunci browserele WebKit vor stiliza câmpurile pe care le-a completat automat pentru utilizator, astfel:
Observați cum câmpurile completate automat au un fundal galben? La asta ne referim și ne vom schimba cu acest fragment.
Fragmentul
Putem folosi -webkit-autofillpseudo-selectorul pentru a viza acele câmpuri și a le stiliza după cum considerăm potrivit. Stilul implicit afectează doar culoarea de fundal, dar majoritatea celorlalte proprietăți se aplică aici, cum ar fi borderși font-size. Putem chiar schimba culoarea textului folosind -webkit-text-fill-colorcare este inclus în fragmentul de mai jos.
/* 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
Consultați stilurile de completare automată stilou stilou în WebKit de CSS-Tricks (@ css-tricks) pe CodePen.