: недопустимый пользователь - CSS-хитрости

Это :user-invalidпсевдокласс CSS, который предлагается в рабочем проекте CSS Selectors Level 4, который выбирает элемент формы в зависимости от того, является ли значение, введенное пользователем, допустимым при проверке на соответствие тому, что указано как допустимое значение в разметка HTML после того, как конечный пользователь взаимодействовал с формой за пределами этого ввода. Фактически, :user-invalidон был назван «Псевдоклассом взаимодействия с пользователем», потому что он уникален для идентификации действия пользователя при выборе элемента.

Возьмите следующую разметку HTML для базовой формы с числовым полем:

Количество:

Числовой диапазон, установленный разметкой HTML для ввода, находится между 1и, 10но установлено значение по умолчанию 11. Это означает, что значение недействительно, как только форма загружается.

Однако :user-invalidпсевдокласс не вступит в силу до тех пор, пока пользователь фактически не взаимодействует с формой, помимо ввода ее в поле. Это взаимодействие и есть разница между :user-invalidи :invalid. Тот же принцип применяется к вводимым значениям формы, которые задаются кнопками :in-range, :out-of-rangeи :required.

Как только значение, введенное пользователем, будет признано недопустимым, мы можем выбрать элемент:

input:user-invalid ( color: red; )

На следующем изображении показаны различные состояния между :validи :user-invalidна основе приведенного выше примера HTML.

Разница между допустимым значением (слева) и недопустимым значением, введенным пользователем после взаимодействия с формой.

Путая вещь с вот как тесно связаны :invalidи :user-invalidявляются. При совместном использовании их может быть сложно различить:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Разницу между `:invalid`(в центре) и недопустимым значением, введенным пользователем (справа), бывает сложно отличить

Использование одного над другим или наличие различного стиля между ними может оказаться лучшим пользовательским опытом в реальном случае использования.