Vi fikk et fint tips fra Lydia Dugger via e-post med en metode for å endre stilene som WebKit-nettlesere bruker på skjemafelt som er fullført automatisk.
Hva vi mener med autofullføring
Mange nettlesere (inkludert Chrome og Safari) gir en innstilling som lar brukerne automatisk fylle ut detaljer for vanlige skjemafelt. Du har sett dette når du fyller ut et skjema som ber om ting som navn, adresse og e-post.
Fangsten er at brukere må ha aktivert denne innstillingen for at denne kodebiten skal være effektiv. Hvis innstillingen er aktivert, vil WebKit-nettlesere utforme feltene den har fullført automatisk for brukeren, slik:
Legg merke til hvordan de autofullførte feltene har gul bakgrunn? Det er det vi refererer til og kommer til å endre med dette utdraget.
Utdraget
Vi kan bruke -webkit-autofillpseudovelgeren til å målrette mot disse feltene og style dem slik vi ønsker det. Standard styling påvirker bare bakgrunnsfargen, men de fleste andre egenskaper gjelder her, for eksempel borderog font-size. Vi kan til og med endre fargen på teksten ved å bruke den -webkit-text-fill-colorsom er inkludert i kodebiten 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 pennendring av autofullfør-stiler i WebKit av CSS-Tricks (@ css-tricks) på CodePen.