HTML & CSS · Senior · Question 52 of 75

Why style errors with `:user-invalid` instead of `:invalid`?

✓Correct answer: :user-invalid matches only after the user has interacted with the field, so empty required fields aren't red on page load
2:invalid is not supported in modern browsers
3:user-invalid also validates on the server

Explanation

:invalid applies immediately, punishing users before they type. :user-invalid gives the "touched" behavior that previously needed JavaScript.

Further reading

Test yourself

Take the HTML & CSS · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.