:user-valid

Псевдокласс :user-valid CSS псевдокласс представляет собой любой проверенный элемент формы, значение которого корректно проходит проверку на основе его ограничений валидации. Однако, в отличие от :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;
}