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

Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (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.

Множественные фоны на примере затухающего фона с градиентом и картинкой

Суть задачи — в psd-макете был фон с картинкой и градиентом, который вверху четкий и…

Как получить прямой url к файлу, загруженному на gogole disk

Мне нужно получить прямую ссылку на файл, который загружен на Google Disk, но проблема в…

Делаем размытый фон для блока (blurred background)

Задача — сделать для отдельного блока на странице размытый фон, Вариант первый — используем две…

Создание карусели/слайдера с помощью плагина Owl Carousel 2

Самый популярный плагин для карусели на jQuery — Owl Carousel 2. Все функции — https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html…

Ответить