Szép tippet kaptunk Lydia Dugger-től e-mailben, a WebKit böngészők által az automatikusan kitöltött űrlapmezőkre alkalmazott stílusok megváltoztatásának módszerével.
Mit értünk az automatikus kiegészítés alatt
Sok böngésző (beleértve a Chrome-ot és a Safari-t is) olyan beállítást biztosít, amely lehetővé teszi a felhasználók számára, hogy automatikusan kitöltsék az általános űrlapmezők részleteit. Látta ezt, amikor kitölt egy űrlapot, amely olyan adatokat kér, mint név, cím és e-mail.
A fogás az, hogy a felhasználóknak engedélyezniük kell ezt a beállítást, hogy ez a kódrészlet hatékony legyen. Ha a beállítás engedélyezve van, akkor a WebKit böngészők stilizálják a felhasználó számára automatikusan kitöltött mezőket, így:
Figyelje meg, hogy az automatikusan kitöltött mezők sárga háttérrel rendelkeznek? Erre hivatkozunk és változtatni fogunk ezzel a részlettel.
A kivonat
Az -webkit-autofillálválasztó segítségével megcélozhatjuk ezeket a mezőket, és stílusuk szerint alakíthatjuk ki őket. Az alapértelmezett stílus csak a háttér színét érinti, de a legtöbb egyéb tulajdonság itt érvényes, például borderés font-size. Akár a szöveg színét is megváltoztathatjuk, -webkit-text-fill-coloramellyel az alábbi kódrészlet szerepel.
/* 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; )Demó
Lásd a WebKit Tollváltoztatási stílusok CSS-Tricks (@ css-tricks) használatával a CodePen-en.