Мы получили хороший совет от Лидии Даггер по электронной почте с методом изменения стилей, которые браузеры WebKit применяют к полям формы, которые были заполнены автоматически.
Что мы подразумеваем под автозаполнением
Многие браузеры (включая Chrome и Safari) предоставляют настройку, которая позволяет пользователям автоматически заполнять данные для общих полей формы. Вы видели это при заполнении формы, которая запрашивает такие вещи, как имя, адрес и адрес электронной почты.
Загвоздка в том, что пользователи должны включить этот параметр, чтобы этот фрагмент был эффективным. Если этот параметр включен, браузеры WebKit будут стилизовать поля, которые были автоматически заполнены для пользователя, например:
Обратите внимание на желтый фон у автозаполненных полей? Это то, о чем мы говорим и собираемся изменить в этом фрагменте.
Фрагмент
Мы можем использовать -webkit-autofillпсевдоселектор, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяется большинство других свойств, таких как borderи font-size. Мы даже можем изменить цвет текста, используя -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; )Демо
См. Статью «Изменение стилей автозаполнения пера в WebKit с помощью CSS-Tricks (@ css-tricks)» на CodePen.