CSS селектор :autofill — поле, заповнене браузером

CSS псевдоклас :autofill вибирає поле вводу, яке браузер заповнив автоматично.

правити

Загальний опис

Браузери фарбують автозаповнені поля у свій жовтуватий колір, і він часто б'ється з дизайном. Цей селектор дає змогу перевизначити вигляд — або, навпаки, свідомо підсвітити такі поля.

правити

Нотатка

Браузери навмисне обмежують, що саме тут можна змінювати — щоб сайт не міг приховати факт автозаповнення. Колір тла зазвичай доводиться перебивати через box-shadow, бо background не спрацює.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:autofill

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
autofill	81+	86+	15+	68+	81+	-

Підтримка: мобільні переглядачі

Переглядач
autofill	81+	yes	yes	15+

Приклади

+ запропонувати свій приклад у пісочниці

<input type="email" name="email" autocomplete="email">

input:autofill {
    /* box-shadow перебиває тло, яке браузер не дає змінити напряму */
    box-shadow: 0 0 0 100px #eef6ff inset;
    -webkit-text-fill-color: #14170f;
}