: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

css

:required {
 /* ... */
}

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

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

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;
}