CSS :user-invalid

The :user-invalid pseudo-class matches form controls that are invalid after the user has interacted with them. It avoids showing an error state too early.

Syntax

input:user-invalid {
  border-color: #ef4444;
}

Example

input:user-invalid {
  border: 2px solid #ef4444;
}

input:user-valid {
  border: 2px solid #22c55e;
}

Result:Email

Important note

Use :invalid for immediate validity state and :user-invalid when you want feedback after interaction. Check browser support for the exact audience.