Saime Lydia Duggerilt toreda näpunäite e-posti teel meetodiga, kuidas muuta stiile, mida WebKiti brauserid rakendavad automaatselt täidetud vormiväljadele.
Mida me mõtleme automaatse täitmise all
Paljud brauserid (sh Chrome ja Safari) pakuvad sätet, mis võimaldab kasutajatel automaatselt täita tavaliste vormiväljade üksikasjad. Olete seda näinud vormi täitmisel, mis küsib näiteks nime, aadressi ja e-posti aadressi.
Konks on selles, et selle jupi efektiivsuseks peavad kasutajad olema selle seade lubanud. Kui seade on lubatud, kujundavad WebKiti brauserid väljad, mille see on kasutaja jaoks automaatselt täidetud, näiteks:
Pange tähele, kuidas automaatselt täidetud väljadel on kollane taust? See on see, millele me seda juppi viitame ja mida muudame.
Jupp
Saame kasutada -webkit-autofillpseudovalijat nende väljade sihtimiseks ja nende kujundamiseks oma äranägemise järgi. Vaikimisi stiil mõjutab ainult taustavärvi, kuid siin kehtivad enamik muid omadusi, näiteks borderja font-size. Saame isegi teksti värvi muuta, kasutades seda, -webkit-text-fill-colormis on lisatud allpool olevasse juppi.
/* 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
Vaadake CodePeni saidil WebSkit CSS-Tricks (@ css-tricks) pliiatsi muutmise automaatse täitmise stiile.