Что мы подразумеваем под автозаполнением
Многие браузеры (включая Chrome и Safari) предоставляют настройку, которая позволяет пользователям автоматически заполнять данные для общих полей формы. Вы видели это при заполнении формы, которая запрашивает такие вещи, как имя, адрес и адрес электронной почты.
Загвоздка в том, что пользователи должны включить этот параметр, чтобы этот фрагмент был эффективным. Если этот параметр включен, браузеры WebKit будут стилизовать поля, которые были автоматически заполнены для пользователя, например:
Заметили, что у автозаполненных полей желтый фон? Это то, о чем мы говорим и собираемся изменить с помощью этого сниппета
Сниппет
Мы можем использовать псевдоселектор -webkit-autofill, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяется большинство других свойств, таких как граница и размер шрифта. Мы даже можем изменить цвет текста с помощью -webkit-text-fill-color, который включен в фрагмент ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 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.
И еще, не забудьте подписаться на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉
Оставьте ответ