Используйте CSS-селектор :autofill, чтобы выделить поля, которые были (или не были) заполнены автоматически. Это поможет пользователю успешно заполнить форму.
Рекомендации по внедрению
Чтобы выделить поле формы, которое было заполнено автоматически браузером (и не редактировалось пользователем), добавьте селектор в CSS с помощью класса :autofill. Его можно использовать для элементов <input>, <select> или <textarea>.
При оформлении состояний автозаполнения необходимо придерживаться рекомендаций по обеспечению специальных возможностей:
- Несколько индикаторов состояния. Не полагайтесь только на цвет границы, чтобы указать состояние автозаполнения. Используйте несколько индикаторов, например толщину границы и настраиваемое затенение фона, чтобы состояние было заметным.
- Сохраняйте индикаторы фокуса. Никогда не удаляйте контуры фокуса (
outline: none), не предоставив четкую высококонтрастную замену для пользователей клавиатуры.
В следующем примере используется :autofill, чтобы задать настраиваемую границу и фон, а также явные стили фокуса:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
Как показано в этом примере, свойство box-shadow используется для настройки фона, поскольку background-color нельзя переопределить непосредственно в полях автозаполнения.
Используйте правильное название псевдокласса CSS
Не используйте :auto-fill.
ОБЯЗАТЕЛЬНО. Используйте :autofill, так как это правильное название псевдокласса.
Резервные стратегии
Псевдокласс :autofill – это прогрессивное улучшение. В браузерах, которые не поддерживают эту функцию, форма будет работать в обычном режиме, но поля ввода не будут выделяться при автозаполнении. Пользователи по-прежнему смогут заполнить форму. Не используйте резервный код JavaScript.