:user-invalid
An error state that waits its turn
type something that is not an email, then leave the field
Caveat:invalid matches from the moment the page loads, so an empty required field is red before anyone has typed a character. :user-invalid waits until the field has been interacted with.
FallbackWhere it is unsupported nothing turns red at all, which is the safe direction. Keep the browser message as the real error and use colour only to point at it.
/* not :invalid, that fires on load */
input:user-invalid { border-color: #e06c6c; }
input:user-valid { border-color: #93c47d; }Published