The :required
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that has the required
attribute set on it.
/* Selects any required <input> */
input:required {
border: 1px dashed red;
}
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
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: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Result
Accessibility concerns
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.
- MDN Understanding WCAG, Guideline 3.3 explanations
- Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of ':required' in that specification. | Living Standard | No change. |
HTML5The definition of ':required' in that specification. | Recommendation | Defines the semantics of HTML and constraint validation. |
Selectors Level 4The definition of ':required' in that specification. | Working Draft | No change. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:required
|
Chrome
Full support 10 |
Edge
Full support 12 |
Firefox
Full support 4 |
IE
Full support 10 |
Opera
Full support 10 |
Safari
Full support 5 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 5 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- Other validation-related pseudo-classes:
:optional
,:invalid
,:valid
- Form data validation
:required by Mozilla Contributors is licensed under CC-BY-SA 2.5.