:user-valid и :user-invalid

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

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

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

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

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

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

В DOM‑валидации HTML у элемента есть «грязное» состояние — когда пользователь изменил введённое значение. Псевдоклассы :user-valid и :user-invalid учитывают только это состояние: пока поле не трогали, оно не будет совпадать ни с одним из них, даже если формально :invalid уже истинно (например, обязательное поле пусто).

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

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