Псевдокласс CSS `:autofill`

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

Попробуйте

input {
  border: 3px solid black;
}
input:autofill {
  outline: 5px solid magenta;
  border: 3px dashed yellow;
}

<form>
  <p>Click on the text box and choose any option suggested by your browser.</p>
  <p>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" autocomplete="given-name" />
  </p>
  <p>
    <label for="email">Email Address</label>
    <input id="email" name="email" type="email" autocomplete="email" />
  </p>
  <p>
    <label for="country">Country</label>
    <input
      id="country"
      name="country"
      type="text"
      autocomplete="country-name" />
  </p>
</form>

Описание

Псевдокласс :autofill выбирает элементы <input> с неизменённым содержимым, которое было автоматически заполнено пользовательским агентом. Автозаполнение может происходить, если в настройках браузера включено автозаполнение или если для самого элемента задан атрибут autocomplete.

Когда пользователь использует функцию автозаполнения браузера для заполнения элемента управления формы, заполняются все элементы управления формы, которые можно заполнить на основе выбранного значения. Все они будут соответствовать состоянию интерфейса :autofill. Если пользователь редактирует элемент управления, он перестаёт соответствовать :autofill, даже если его значение совпадает со значением, установленным при автозаполнении.

Спецификация включает псевдокласс с префиксом поставщика :-webkit-autofill в качестве псевдонима. Он также соответствует элементам input, автоматически заполненным пользовательским агентом, и перестаёт им соответствовать, если пользователь редактирует заполненное поле.

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

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color:
    light-dark(rgb(232 240 254), rgb(70 90 126 / 0.4)) !important;
  color: fieldtext !important;
}

Это означает, что в собственных правилах нельзя переопределить значения по умолчанию background-color, background-image или color для выбранных автоматически заполненных элементов input, но можно переопределить appearance, а также эти свойства для автоматически заполненных элементов, которые в данный момент не находятся в фокусе.

Синтаксис

:autofill {
  /* ... */
}

Примеры

В следующем примере показано использование псевдокласса :autofill для изменения границы текстового поля, автоматически заполненного браузером.

HTML

Мы добавляем три HTML-элемента <input>, каждый из которых связан с соответствующим элементом <label>. Значения name и email, скорее всего, будут автоматически заполнены и будут соответствовать :autofill, тогда как значение pet — скорее всего, нет.

<form method="post" action="">
  <p>
    <label for="name">Name: </label>
    <input name="n" id="name" autocomplete="given-name" />
  </p>
  <p>
    <label for="email">Email: </label>
    <input type="email" name="email" id="email" autocomplete="email" />
  </p>
  <p>
    <label for="pet">Your pet's name: </label>
    <input name="pet" id="pet" />
  </p>
</form>

CSS

Для элементов <input>, соответствующих состоянию :autofill, мы задаём border-radius, outline и border-color.

input {
  border-radius: 0px;
}

input:autofill {
  border-radius: 0.5lh;
  outline: 5px dashed magenta;
  border-color: yellow;
}

@supports not selector(:autofill) {
  body::before {
    content: "Your browser doesn't support the :autofill selector.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результаты

Если разрешить name автоматически заполнять поля, у name и email будут закруглённые границы и пурпурная обводка, хотя граница, скорее всего, не изменится из-за флага !important, заданного в таблице стилей пользовательского агента. Попробуйте отредактировать одно из полей: обратите внимание, что после изменения значения, даже если вернуть значение, установленное при автозаполнении, стили :autofill больше не применяются.

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

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

См. также

• <input> псевдоклассы
• Модуль селекторов CSS