CSS user-invalid: delay visual errors until interaction warrants them

When to use it

An email field may be technically invalid while the user has typed only the first few characters. Styling every intermediate keystroke as an error can distract from completing the address. Use user-invalid for a border after the browser exposes the state, but keep actual submission feedback in visible text associated with the field. The sample does not suppress the native validity model and does not make the border the sole message. Test typing, blur, correcting the value, browser autofill, and a failed server response. Server rules can reject an address that passes client constraints, so application errors need their own state and message rather than relying on a CSS pseudo-class alone.

.billing-email { border: 2px solid #41637c; }
.billing-email:user-invalid { border-color: #a12632; }
.billing-email:focus-visible { outline: 3px solid #175b44; outline-offset: 2px; }

Cost and verification

Selector matching is inexpensive. The maintenance cost is coordinating native validity, application state, and server decisions without contradictory cues. The border color must be paired with a visible explanation or status, because color alone does not identify the problem. Do not assume all browsers reveal user-invalid at the same moment. If a control is optional or disabled, check its actual validity contract before styling it. Keep the submit path usable with a keyboard and test that the error remains discoverable after focus moves.

Common Mistakes

• Do not use an invalid border as the only error message.
• Do not assume browser and server validation rules are identical.
• Do not expect the state to appear at one fixed keystroke across browsers.

Connected lessons

• CSS Property Decisions
• CSS form states: make errors and disabled fields explicit
• CSS attribute selectors: target explicit document state
• HTML aria-invalid: connect a failed field to a repair instruction

Further rendering decisions

• CSS :user-valid: confirm a checked field without premature praise