:user-valid и :user-invalid

:user-valid и :user-invalid — псевдоклассы, которые совпадают с элементами форм по их валидности, но только после того, как пользователь изменил значение поля (элемент стал "грязным"). Это позволяет показывать обратную связь не сразу при загрузке страницы, а лишь после действия пользователя.

• :valid/:invalid срабатывают всегда по текущему состоянию поля, даже до взаимодействия.
• Пока пользователь не взаимодействовал с полем, ни :user-valid, ни :user-invalid не совпадают с элементом, даже если он уже не проходит HTML-валидацию.

Ниже поля покажут "успех/ошибку" только после того, как вы что‑то введёте и уберёте фокус с поля.

        
          
          /* Ошибка показывается только после пользовательского ввода */input:user-invalid {  border-color: #F498AD;}/* Успех — тоже только после ввода */input:user-valid {  border-color: #41E847;}
          /* Ошибка показывается только после пользовательского ввода */
input:user-invalid {
  border-color: #F498AD;
}

/* Успех — тоже только после ввода */
input:user-valid {
  border-color: #41E847;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Эти псевдоклассы зависят от факта взаимодействия пользователя с полем. До первого изменения значения состояние валидности игнорируется. Это делает формы менее "агрессивными": подсветка ошибок и успеха появляется после действия человека.

💡 Используйте :user-invalid вместо мгновенного :invalid, когда хотите убрать "красные рамки" на свежезагруженной странице.
💡 Комбинируйте с :focus/:focus-visible: фокус — синий обводкой, валидность — своим цветом после ввода.
💡 Добавляйте текстовые подсказки соседним элементом и показывайте их через соседние селекторы: input:user-invalid + .message { … }.
💡 Для кросс‑браузерности можно продублировать стили на :invalid как "запасной вариант", если это уместно по UX.