Как убрать желтый (серый) фон при автозаполнении полей формы в браузере Google Chrome

20.08.2018

Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения серый. И раньше было необходимо прописывать другие стили.

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

Пример желтого фона инпутов в форме в браузере Chrome на скриншоте:

Решение довольно таки простое, просто добавьте в свой CSS-файл такие стили:

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;
}

Рабочий пример:

See the Pen aabNQM by Denis (@deniscreative) on CodePen.0

Рекомендую к прочтению:

Оставить комментарий