Saimme Lydia Duggerilta sähköpostitse mukavan vinkin, jolla voit muuttaa tyylejä, joita WebKit-selaimet käyttävät automaattisesti täytettyihin lomakekenttiin.
Mitä tarkoitamme automaattisella täydennyksellä
Monet selaimet (mukaan lukien Chrome ja Safari) tarjoavat asetuksen, jonka avulla käyttäjät voivat täyttää automaattisesti yhteisten lomakekenttien tiedot. Olet nähnyt tämän täytettäessä lomaketta, jossa kysytään esimerkiksi nimeä, osoitetta ja sähköpostiosoitetta.
Saalis on, että käyttäjien on oltava käytössä tämä asetus, jotta tämä katkelma olisi tehokas. Jos asetus on käytössä, WebKit-selaimet tyylittävät kentät, jotka se on täyttänyt käyttäjälle, kuten:
Huomaa, kuinka automaattisesti täytetyillä kentillä on keltainen tausta? Sitä me viittaamme tähän muutokseen.
Katkelma
Voimme käyttää -webkit-autofillnäennäisvalitsinta kohdentaaksemme nämä kentät ja muotoillaksemme ne sopivaksi. Oletustyyli vaikuttaa vain taustaväriin, mutta useimmat muut ominaisuudet, kuten borderja font-size. Voimme jopa muuttaa tekstin väriä käyttämällä -webkit-text-fill-coloralla olevaa katkelmaa.
/* 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
Katso CodeSenin kynänvaihdon automaattisen täydennystyylin WebKit CSS-Tricks (@ css-tricks) -työkalu.