Получихме хубав съвет от Lydia Dugger по имейл с метод за промяна на стиловете, които браузърите WebKit прилагат към полетата за формуляри, които са били автоматично попълнени.
Какво имаме предвид под автодовършване
Много браузъри (включително Chrome и Safari) предоставят настройка, която позволява на потребителите автоматично да попълват подробности за често срещаните полета на формуляра. Виждали сте това, когато попълвате формуляр, който иска неща като име, адрес и имейл.
Уловката е, че потребителите трябва да са активирали тази настройка, за да може този фрагмент да бъде ефективен. Ако настройката е активирана, тогава браузърите WebKit ще оформят полетата, които е автоматично попълнил за потребителя, по следния начин:
Забележете как автоматично попълнените полета имат жълт фон? Това е, което визираме и ще променим с този фрагмент.
Фрагментът
Можем да използваме -webkit-autofillпсевдоселектора, за да насочим тези полета и да ги стилизираме, както сметнем за добре. Стайлингът по подразбиране засяга само цвета на фона, но тук се прилагат повечето други свойства, като borderи font-size. Можем дори да променим цвета на текста, използвайки -webkit-text-fill-colorкойто е включен в фрагмента по-долу.
/* 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; )Демонстрация
Вижте стиловете за автоматично довършване на Pen Pen в WebKit от CSS-Tricks (@ css-tricks) на CodePen.