E-poštom smo dobili lijepi savjet od Lydie Dugger s metodom za promjenu stilova koje preglednici WebKit primjenjuju na polja obrasca koja su automatski dovršena.
Što podrazumijevamo pod samodovršavanjem
Mnogi preglednici (uključujući Chrome i Safari) pružaju postavku koja omogućava korisnicima da automatski popunjavaju detalje za uobičajena polja obrasca. To ste vidjeli pri popunjavanju obrasca koji traži stvari poput imena, adrese i e-pošte.
Kvar je u tome što su korisnici morali omogućiti ovu postavku kako bi ovaj isječak bio učinkovit. Ako je postavka omogućena, tada će preglednici WebKit za korisnika stilizirati polja koja je automatski dovršio, na sljedeći način:
Primijetite kako automatski dovršena polja imaju žutu pozadinu? To je ono na što mislimo i što ćemo promijeniti s ovim isječkom.
Isječak
Možemo koristiti -webkit-autofillpseudo-selektor ciljati one polja i stil njih kao što vidite stane. Zadani stil utječe samo na boju pozadine, ali ovdje se primjenjuju većina ostalih svojstava, poput borderi font-size. Možemo čak promijeniti boju teksta pomoću -webkit-text-fill-colorkoje je uključeno u donji isječak.
/* 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
Pogledajte stilove automatskog dovršavanja olovke u WebKit-u od CSS-trikova (@ css-trikovi) na CodePenu.