Как изменить стили autocomplete полей форм в Chrome

При валидации формы кроме состояния ошибки (некорректно заполненного поля) часто бывает что в дизайне стилизуется состояние валидного (заполненного поля).
Скрипты валидации добавляют какой-нибудь класс типа .success у которого есть свое оформление, и пользователь видит что поле заполнено правильно.

 

Введение

Но когда пользователь ввел например, свой email с помощью автодополнения браузера — то ваших стилей вы скорее всего не увидите, потому в браузерах с движком chromium их будет перебивать agent style, и на момент написания этой статьи Chrome закрашивает фон инпута бледно-фиолетовым цветом.

Браузеры Chrome применят к полю формы, которое заполнено с помощью встроенного автокомплита свои псевдоклассы -webkit-autofill / -internal-autofill-selected,

• -webkit-autofill
• -internal-autofill-selected

И добавляет фон через background-color, color,   и обнуляем background-image . Проблема в том ,что мы не можем перебить эти стили даже с !important.Поэтому воспользуемся следующей техникой.

 

Задача

Написать код переопределяющий цвет фона и текста при заполнении поля формы с помощью встроенного autocomplete в браузерах Chrome.

 

Описание

Для изменения текста воспользуемся свойством webkit-text-fill-color,  которое являясь тем же самым что и color имеет более высокий приоритет.

А для закрашивания фона наложим сверху box-shadow.

Чтобы наложить полупрозрачный фон,  — ну вы сами знаете,  сделаем две тени, одна из которых закроет дефолтную размазню белым, а вторая будет целевым цветом.

Это работает для элементов:

• input
• textarea
• select

Можно редактировать на codepen

See the Pen
by Kirill Malahov (@malahov-web)
on CodePen.

Материалы:

• Change Autocomplete Styles in WebKit Browsers https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/