Изменение стилей автозаполнения в браузерах WebKit

Что мы подразумеваем под автозаполнением

Многие браузеры (включая Chrome и Safari) предоставляют настройку, которая позволяет пользователям автоматически заполнять данные для общих полей формы. Вы видели это при заполнении формы, которая запрашивает такие вещи, как имя, адрес и адрес электронной почты.

Загвоздка в том, что пользователи должны включить этот параметр, чтобы этот фрагмент был эффективным. Если этот параметр включен, браузеры WebKit будут стилизовать поля, которые были автоматически заполнены для пользователя, например:

Заметили, что у автозаполненных полей желтый фон? Это то, о чем мы говорим и собираемся изменить с помощью этого сниппета

Сниппет

Мы можем использовать псевдоселектор -webkit-autofill, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяется большинство других свойств, таких как граница и размер шрифта. Мы даже можем изменить цвет текста с помощью -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;
}

Демо

See the Pen
VwjKvLG
by Denys Popov (@DenysPopov)
on CodePen.

И еще, не забудьте подписаться на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉

Оставьте ответ

comment-avatar

*