:required
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.
Try it
label { display: block; margin-top: 1em; } .req { color: red; } *:required { background-color: gold; } <form> <label for="name">Name: <span class="req">*</span></label> <input id="name" name="name" type="text" required /> <label for="birth">Date of Birth:</label> <input id="birth" name="birth" type="date" /> <label for="origin" >How did you find out about us? <span class="req">*</span></label > <select id="origin" name="origin" required> <option>Google</option> <option>Facebook</option> <option>Advertisement</option> </select> <p><span class="req">*</span> - Required field</p> </form> This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.
Note: The :optional pseudo-class selects optional form fields.
Syntax
:required { /* ... */ } Accessibility
Mandatory <input>s should have the required attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.
If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.
Examples
The required field has a red border
HTML
<form> <div class="field"> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required /> </div> </form> CSS
label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:required { border-color: maroon; border-width: 3px; } input:required:invalid { border-color: #c00000; } Result
Specifications
| Specification |
|---|
| HTML # selector-required |
| Selectors Level 4 # required-pseudo |
Browser compatibility
See also
- Other validation-related pseudo-classes:
:optional,:invalid,:valid - Form data validation