Gavome gražų „Lydia Dugger“ patarimą el. Paštu su metodu, kaip pakeisti stilius, kuriuos „WebKit“ naršyklės taiko formos laukams, kurie buvo užpildyti automatiškai.
Ką turime omenyje turėdami automatinį užbaigimą
Daugelyje naršyklių (įskaitant „Chrome“ ir „Safari“) pateikiamas nustatymas, leidžiantis vartotojams automatiškai užpildyti išsamią informaciją apie bendrus formos laukus. Tai matėte pildydami formą, kurioje prašoma pateikti tokius duomenis kaip vardas, adresas ir el. Paštas.
Svarbu tai, kad vartotojai turi įgalinti šį nustatymą, kad šis fragmentas būtų veiksmingas. Jei nustatymas įgalintas, tada „WebKit“ naršyklės stilizuos laukus, kuriuos jis automatiškai užpildė vartotojui, taip:
Atkreipkite dėmesį, kaip automatiškai užpildyti laukai turi geltoną foną? Tai, ką mes nurodome ir ketiname pakeisti naudodami šį fragmentą.
Fragmentas
Mes galime naudoti -webkit-autofillpseudo selektorių, kad galėtume nukreipti tuos laukus ir suformuoti juos taip, kaip mums atrodo tinkama. Numatytasis stilius turi įtakos tik fono spalvai, tačiau čia galioja dauguma kitų savybių, pvz., borderIr font-size. Mes netgi galime pakeisti teksto spalvą naudodami -webkit-text-fill-colortai, kas įtraukta į toliau pateiktą fragmentą.
/* 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; )Demonstracija
Peržiūrėkite „CSK-Tricks“ („@ css-tricks“) „WebKit“ rašiklio keitimo automatinio užbaigimo stilius „CodePen“.
