:autofill

Базовая версия 2023

Новое

С февраля 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Псевдокласс :autofill CSS соответствует, когда элемент псевдоклассу <input> имеет значение, автоматически заполненное браузером. Класс перестаёт соответствовать, если пользователь изменяет поле.

Попробуйте

Примечание: Стили пользовательского агента многих браузеров используют !important в своих объявлениях стилей :-webkit-autofill, что делает их непереопределяемыми веб-страницами без использования JavaScript-хитростей. Например, Chrome имеет следующее в своём внутреннем стиле:

background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

Это означает, что вы не можете установить background-color, background-image или color в ваших собственных правилах.

Синтаксис

:autofill {
  /* ... */
}

Примеры

Следующий пример демонстрирует использование псевдокласса :autofill для изменения границы текстового поля, которое было автоматически завершено браузером. Чтобы избежать создания некорректного списка селекторов, и :-webkit-autofill и :autofill сопоставляются с помощью снисходительного списка селекторов с :is().

input {
  border-radius: 3px;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px dotted orange;
}

<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

Спецификации

Спецификация
Стандарт HTML # selector-autofill

Совместимость с браузерами

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:autofill`	1101	11079	8686	9615	153	11018	8686	7414	151	21.01.0	1104.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill