Псевдокласс CSS `:user-valid`

:user-valid CSS псевдокласс соответствует любому проверенному элементу формы, значение которого прошло проверку с учётом его ограничений проверки. Однако, в отличие от :valid, он соответствует элементу только после взаимодействия с ним пользователя.

Этот псевдокласс применяется, если элемент управления формы допустим и произошло одно из следующих событий:

• Пользователь изменил значение элемента управления формы и подтвердил изменение, например, переведя фокус на другой элемент.
• Пользователь попытался отправить форму, даже если значение элемента управления не изменялось.
• Значение было недопустимым, когда элемент получил фокус, и пользователь изменил его так, что оно стало допустимым, даже если фокус всё ещё находится на элементе.

После применения этого псевдокласса пользовательский агент повторно проверяет допустимость элемента при каждом нажатии клавиши, пока элемент находится в фокусе.

• Если элемент находится в фокусе и значение было недопустимым в момент получения фокуса, проверка выполняется при каждом нажатии клавиши.

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

Синтаксис

:user-valid {
  /* ... */
}

Примеры

Задание цвета и символа для :user-valid

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

<form>
  <label for="email">Email *: </label>
  <input
    id="email"
    name="email"
    type="email"
    value="test@example.com"
    required />
  <span></span>
</form>

input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}

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

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

См. также

• :valid
• :invalid
• :required
• :optional
• :user-invalid