Перейти к содержанию

:user-invalid

Псевдокласс :user-invalid представляет любой валидированный элемент формы, значение которого не является валидным в соответствии с ограничениями валидации после того, как пользователь с ним взаимодействовал.

Псевдокласс :user-invalid должен соответствовать элементу :invalid, :out-of-range или пустому элементу :required в период между попыткой отправки формы пользователем и повторным взаимодействием пользователя с элементом формы.

Синтаксис

1
2
3
:user-invalid {
    /* ... */
}

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

Пример

Установка цвета и символа на :user-invalid

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

1
2
3
4
5
<form>
    <label for="email">Email *: </label>
    <input id="email" name="email" type="email" required />
    <span></span>
</form>

1
2
3
4
5
6
7
8
input:user-invalid {
    border: 2px solid red;
}

input:user-invalid + span::before {
    content: '✖';
    color: red;
}

Комментарии