CSS pseudo-classes such as :focus-visible, :invalid, and :disabled respond to browser control states. They change presentation; they do not validate the server submission.
Make this comfortable
CSS form states: make errors and disabled fields explicit
How the rule works
A refund form contains a required amount and an optional note. A visible focus ring lets keyboard users locate the active field, while an invalid border provides one visual signal after validation has run. The error message must be real text associated with the input, and the server must still reject invalid amounts. A disabled submit button must use the actual disabled attribute, not just a muted class, if activation is unavailable. Beware of showing an error before the user has had a chance to enter anything: browser constraint validity can exist before a form has been submitted, so coordinate error visibility with the form's interaction policy. Test keyboard, touch, autofill, zoom, and high contrast.
.refund-form :focus-visible { outline: 3px solid #175b44; outline-offset: 2px; }
.refund-form [aria-invalid="true"] { border-color: #a92d3b; }
.refund-form :disabled { cursor: not-allowed; opacity: .75; }
.refund-form .field-error { color: #8a1725; }Cost and verification
These state selectors add negligible rendering cost. The maintenance cost lies in keeping aria-invalid, the visible message, and server validation synchronized. The sample uses an explicit aria-invalid attribute rather than styling every empty required field as an error. Color contrast must be checked against actual surfaces, and opacity may make disabled text too faint. A CSS class is not a security boundary; the backend must enforce the same field rules regardless of the button's appearance.
Common Mistakes
- Do not show an error only through border color.
- Do not make a button look disabled while leaving it active.
- Do not rely on client-side CSS for validation or authorization.
Connected lessons
- CSS Interaction and Accessibility
- CSS focus-visible: keep keyboard location unmistakable
- CSS color and contrast: pair text with its real surface
- HTML form help: connect visible instructions and errors to a control
Property decisions
Related behavior
Further form and type decisions
- CSS field-sizing: let a note grow within firm limits
- CSS placeholder-shown: style empty state without replacing a label
- CSS user-invalid: delay visual errors until interaction warrants them
- CSS autofill state: retain contrast when the browser fills a control
Further native-state decisions
css
interaction
web