<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any required &lt;input&gt; /</span> <span class="token selector">input:required</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px dashed red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

:required

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

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

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

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.

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors