Spreminjanje stilov samodokončanja v brskalnikih WebKit - CSS-triki

Lydia Dugger je po e-pošti dobila lep nasvet z metodo za spreminjanje stilov, ki jih brskalniki WebKit uporabljajo za polja samoizpolnjenih obrazcev.

Kaj mislimo s samodokončanjem

Številni brskalniki (vključno s Chromom in Safarijem) nudijo nastavitev, ki uporabnikom omogoča samodejno izpolnjevanje podrobnosti za običajna polja obrazcev. To ste videli že pri izpolnjevanju obrazca, ki zahteva podatke, kot so ime, naslov in e-pošta.

Ulov je v tem, da so morali uporabniki to nastavitev omogočiti, da bo ta delček lahko učinkovit. Če je nastavitev omogočena, bodo brskalniki WebKit za uporabnika oblikovali polja, ki jih je sam dokončal, tako:

Opazite, kako imajo samodokončana polja rumeno ozadje? Na to se sklicujemo in se bomo s tem delčkom spremenili.

Delček

S -webkit-autofillpsevdo-izbirnikom lahko ciljamo na ta polja in jih oblikujemo, kot se nam zdi primerno. Privzeti slog vpliva samo na barvo ozadja, vendar tukaj velja večina drugih lastnosti, na primer borderin font-size. Spremenimo lahko celo barvo besedila, -webkit-text-fill-colorki je vključeno v spodnji delček.

/* 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; )