:required
Matches fields with the `required` attribute; `:optional` matches those without it.
Syntax
input:required { … }Examples
Required fields are marked with a red stripe:
<style>
input:required { border-left: 4px solid crimson; }
input:optional { border-left: 4px solid lightgray; }
</style>
<p><input placeholder="Email (required)" required></p>
<p><input placeholder="Phone (optional)"></p>Notes
<input> cannot have ::before or ::after, so a "required" asterisk is usually added to the <label>, for example with label:has(+ input:required)::after.
See also
- :valid — `:valid` matches a field whose value passes the built-in checks; `:invalid` matches one that does not.
- :user-invalid — Matches an invalid field only after the user has interacted with it; `:user-valid` is the opposite.
- ::after — Creates a virtual last child of the element — for icons, marks and decorations after the content.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.