Псевдокласс :user-invalid в CSS отличается от :invalid тем, что применяется к полям формы после их заполнения и потери фокуса. 1

:invalid применяется к полям формы сразу же, таким образом, ещё незаполненное поле будет считаться невалидным. 1:user-invalid решает проблему, когда недействительные поля формы помечаются как :invalid ещё до взаимодействия с пользователем, что может сбить его с толку. 2 Псевдокласс :user-invalid применяется только после взаимодействия с пользователем, когда элемент теряет фокус. 3

Таким образом, основное отличие в том, что :invalid применяется сразу к незаполненным полям формы, а :user-invalid — только после заполнения и потери фокуса. 1