Pseudo-classes match an element's current state or relationship. They do not add a label, validate on the server, or make a noninteractive element operable.
Make this comfortable
CSS pseudo-classes: style interaction states without hiding them
How the rule works
A receipt lookup field needs a clear default border and visible feedback when the browser considers its input invalid. Keep a base rule that works before interaction, then add a focus outline and an invalid border. Focus must remain visible for keyboard users even if pointer hover uses a subtler treatment. A required field may match :invalid before the person submits; choose whether that timing is helpful rather than making every blank field appear broken at page load. Server errors still need visible text and an accessible association to the control.
.receipt-lookup input { border: 1px solid #71869a; padding: .7rem; }
.receipt-lookup input:focus-visible { outline: 3px solid #205c8a; outline-offset: 2px; }
.receipt-lookup input:invalid { border-color: #9b3030; }Cost and verification
State selectors avoid extra script for paint changes. Their cost is testing across keyboard, touch, and validation timing; hover alone does not work on every device. Inspect color contrast on the actual background and confirm the outline is not clipped by a parent with overflow hidden. Do not communicate failure by border color alone. A real server response should return a text error and preserve the submitted value.
Common Mistakes
- Do not remove outlines without a replacement focus indicator.
- Do not equate :invalid with a trusted server decision.
- Do not make hover the only way to reveal an action.
Connected lessons
css
selectors
web