: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 вместо мгновенного :valid/:invalid, когда хотите убрать «красные рамки» на свежезагруженной странице.
💡 Комбинируйте с :focus/:focus-visible: фокус — синей обводкой, валидность — своим цветом после ввода.
💡 Добавьте текстовую подсказку в виде соседнего элемента и управляйте её видимостью с помощью комбинатора соседних селекторов (+ или ~), например:

        
          
          input:user-invalid + .message {  display: block;}
          input:user-invalid + .message {
  display: block;
}

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