CSS :required and :optional: reinforce a real form requirement

When to use it

An evidence intake form requires a case code and leaves a reviewer note optional. The labels say which fields are required in words, and the CSS adds a narrow border accent to the required controls. The accent is supplementary because color can disappear in forced colors and a border alone does not explain the requirement. Test an empty submission, a partially filled form, an invalid code, a server rejection, and a no-CSS rendering. Required status differs from validity: an untouched required field can be invalid before a user has acted, so do not show an alarming error border merely because :required matches. The form needs associated error text after validation and an authoritative server check. A disabled control and a readonly text field have different validation behavior; avoid mixing them into a generic required rule without reviewing the actual HTML. Keep optional wording visible when omitting a value has a practical consequence.

.evidence-intake :is(input, select, textarea):required { border-inline-start: .25rem solid #1c5e87; }
.evidence-intake :is(input, select, textarea):optional { border-inline-start: .25rem solid #9aaeb8; }
@media (forced-colors: active) { .evidence-intake :is(input, select, textarea):required { border-inline-start-color: CanvasText; } }

Cost and verification

Matching requirement state adds little rendering cost. The maintenance cost is keeping visible labels, native attributes, validation messaging, and server rules consistent as a form changes. Do not generate a required asterisk solely through ::after: generated content is not a reliable replacement for a clear label. Use a neutral base border so a control remains visible when the accent is absent. The optional selector does not mean a value is unimportant; it only means native constraint validation does not require one. Test each input type because required has no useful effect on some controls.

Common Mistakes

• Do not confuse :required with :invalid or a submitted error.
• Do not use CSS-generated symbols as the only requirement instruction.
• Do not assume aria-required activates native validation.

Connected lessons

• CSS Property Decisions
• CSS form states: make errors and disabled fields explicit
• CSS user-invalid: delay visual errors until interaction warrants them
• HTML required versus aria-required: semantics do not replace validation