Vi fick ett bra tips från Lydia Dugger via e-post med en metod för att ändra de stilar som WebKit-webbläsare använder för formulärfält som har fyllts i automatiskt.
Vad vi menar med autoslutförande
Många webbläsare (inklusive Chrome och Safari) tillhandahåller en inställning som låter användare automatiskt fylla i detaljer för vanliga formulärfält. Du har sett detta när du fyller i ett formulär som ber om saker som namn, adress och e-post.
Fångsten är att användare måste ha aktiverat den här inställningen för att detta utdrag ska vara effektivt. Om inställningen är aktiverad kommer WebKit-webbläsare att utforma de fält som den har fyllt i automatiskt för användaren, så här:
Lägg märke till hur de autoslutförda fälten har en gul bakgrund? Det är vad vi hänvisar till och kommer att ändra med detta utdrag.
Utdraget
Vi kan använda -webkit-autofillpseudoväljaren för att rikta in de här fälten och utforma dem enligt vår önskan. Standardformatet påverkar bara bakgrundsfärgen, men de flesta andra egenskaper gäller här, till exempel borderoch font-size. Vi kan till och med ändra färgen på texten med den -webkit-text-fill-colorsom ingår i utdraget nedan.
/* 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 pennbyte Autocomplete Styles i WebKit av CSS-Tricks (@ css-tricks) på CodePen.