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

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

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

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

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

Сниппет

Мы можем использовать псевдоселектор -webkit-autofill, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяется большинство других свойств, таких как граница и размер шрифта. Мы даже можем изменить цвет текста с помощью -webkit-text-fill-color, который включен в фрагмент ниже.

Демо

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

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

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

comment-avatar

*