The :required pseudo-class matches any input, select, or textarea that has the HTML required attribute — fields that must be filled before the form can submit.
It marks the field as mandatory, not as valid. An empty required field still matches :required. Pair with :optional and :invalid for fuller form UX.
Supported across modern browsers since mid-2015. Always set the HTML required attribute for assistive tech — CSS alone is not enough for accessibility.
:required { /* styles */ }Example: input:required { border-color: maroon; }.
:required has no values — it is a state based on the HTML attribute:
:requiredMark the field in HTML, then style the mandatory state in CSS.
required to the input, select, or textarea.input:required (or a scoped form selector).:required:invalid for empty/invalid feedback.| Piece | Required? | Role |
|---|---|---|
required attribute | Yes | Makes the control mandatory for submit + AT |
:required rule | Yes | Visual treatment for mandatory fields |
| Label / text hint | Recommended | Do not rely on border color alone |
:optional / :invalid | Optional | Contrast and validation feedback |
Toggle the required attribute. The gold highlight applies only while the field matches :required.
Short patterns for mandatory fields. Use Try It Yourself for a live editor.
Highlight a mandatory name field.
<style>
input:required {
background: #fef08a;
border: 1px solid #ca8a04;
}
</style>
<label>
Name (required)
<input type="text" name="name" required>
</label>required makes the field mandatory for submit.input:required matches that attribute state.:optionalContrast mandatory and optional fields in one form.
<style>
input:required {
border-left: 4px solid #b91c1c;
}
input:optional {
border-left: 4px solid #94a3b8;
}
</style>
<input type="email" required placeholder="Email *">
<input type="text" placeholder="Nickname (optional)">required → red left border via :required.required → matches :optional.Stronger border when a required field is empty or invalid.
<style>
input:required {
border: 2px solid #78716c;
}
input:required:invalid {
border-color: #c00000;
}
</style>
<label>
Email
<input type="email" required>
</label>:required styles every mandatory field.:required:invalid tightens the look when empty or bad.Most confusion is mixing “required” with “valid.”
Keep the HTML required attribute and a visible text or icon hint. Color-only borders fail WCAG intent for “required.”
A required select often needs an empty first option (value="") so the browser can treat “no choice” as invalid until the user picks one.
A required checkbox must be checked to submit. Style carefully so the box stays usable and labeled.
:required is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
Widely available across modern browsers since CSS / HTML5 form validation landed (MDN: mid-2015). Works with input, select, and textarea. Internet Explorer 10+ supports the selector with HTML5 forms.
Bottom line: Safe for everyday form styling. Always set the required attribute in HTML. This is not a JavaScript runtime API.
required attribute.:required.input:required { border-color: …; }.:optional / :invalid.One line: :required paints “must fill” — mark it in HTML, style it in CSS, don’t confuse it with valid.
Learn how to target the document root for CSS custom properties.
5 people found this page helpful