Od Lydie Duggerové jsme dostali pěkný tip e-mailem s metodou změny stylů, které používají prohlížeče WebKit pro pole formulářů, která byla automaticky doplněna.
Co máme na mysli automatickým doplňováním
Mnoho prohlížečů (včetně Chrome a Safari) poskytuje nastavení, které umožňuje uživatelům automaticky vyplňovat podrobnosti pro běžná pole formuláře. Viděli jste to při vyplňování formuláře, který žádá o jméno, adresu a e-mail.
Háček je v tom, že uživatelé musí mít toto nastavení povoleno, aby byl tento úryvek efektivní. Pokud je nastavení povoleno, prohlížeče WebKit upraví pole, která pro uživatele automaticky doplnila, například:
Všimněte si, jak mají automaticky vyplněná pole žluté pozadí? To je to, na co odkazujeme a který se tímto fragmentem změníme.
Úryvek
Můžeme použít -webkit-autofillpseudo-selektor k zacílení těchto polí a jejich přizpůsobení, jak uznáme za vhodné. Výchozí styl ovlivňuje pouze barvu pozadí, ale platí zde většina ostatních vlastností, například bordera font-size. Můžeme dokonce změnit barvu textu pomocí -webkit-text-fill-colortoho, co je zahrnuto v úryvku níže.
/* 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ázka
Podívejte se na Styly automatického doplňování pro změnu pera ve WebKitu od CSS-Tricks (@ css-tricks) na CodePen.