Vi fik et godt tip fra Lydia Dugger via e-mail med en metode til at ændre de typografier, som WebKit-browsere anvender til formularfelter, der er blevet udfyldt automatisk.
Hvad vi mener med autofuldførelse
Mange browsere (inklusive Chrome og Safari) giver en indstilling, der giver brugerne mulighed for automatisk at udfylde detaljer for almindelige formularfelter. Du har set dette, når du udfylder en formular, der beder om ting som navn, adresse og e-mail.
Fangsten er, at brugerne skal have aktiveret denne indstilling for at dette uddrag skal være effektivt. Hvis indstillingen er aktiveret, vil WebKit-browsere style de felter, den har udfyldt automatisk for brugeren, sådan:
Bemærk, hvordan de autofuldførte felter har en gul baggrund? Det er det, vi henviser til og vil ændre med dette uddrag.
Kodestykket
Vi kan bruge -webkit-autofillpseudovælgeren til at målrette mod disse felter og style dem, som vi finder det passende. Standard styling påvirker kun baggrundsfarven, men de fleste andre egenskaber gælder her, såsom borderog font-size. Vi kan endda ændre farven på teksten ved hjælp af den, -webkit-text-fill-colorder er inkluderet i uddraget nedenfor.
/* 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
Se penneskift autofuldfør stilarter i WebKit af CSS-Tricks (@ css-tricks) på CodePen.