Как изменить стили 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/