Od Lydie Duggerovej sme dostali pekný tip e-mailom s metódou zmeny štýlov, ktoré používajú prehliadače WebKit pre polia formulárov, ktoré sa automaticky dopĺňajú.
Čo máme na mysli pod automatickým dokončovaním
Mnoho prehľadávačov (vrátane Chrome a Safari) poskytuje nastavenie, ktoré umožňuje používateľom automaticky vypĺňať podrobnosti pre bežné polia formulárov. Videli ste to pri vypĺňaní formulára, ktorý žiada o meno, adresu a e-mail.
Háčik je v tom, že používatelia musia toto nastavenie povoliť, aby bol tento úryvok efektívny. Ak je nastavenie povolené, prehliadače WebKit upravia polia, ktoré pre používateľa automaticky dopĺňal, takto:
Všimnite si, ako majú automaticky dokončené polia žlté pozadie? To je to, o čom týmto úryvkom hovoríme a čo sa zmení.
Úryvok
Pomocou -webkit-autofillpseudo-selektora môžeme na tieto polia zacieliť a upraviť ich tak, ako nám to vyhovuje. Predvolený štýl ovplyvňuje iba farbu pozadia, ale tu sa uplatní väčšina ďalších vlastností, napríklad bordera font-size. Pomocou textu, -webkit-text-fill-colorktorý je súčasťou útržku nižšie, môžeme dokonca zmeniť farbu textu .
/* 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; )Ukážka
Prečítajte si Štýly automatického dopĺňania štýlov v aplikácii WebKit od CSS-Tricks (@ css-tricks) na stránkach CodePen.