:required CSS Pseudo Class

Description

The :required pseudo-class applies style rules to the <input> element that has the required attribute set, it allows you to select the required fields before submitting the form.

Syntax

input:required { ... } 

Example

<p>
<label for="user">Username</label><input id="user" type="text" required>
</p>
<p>
<label for="email">E-mail</label><input id="email" type="text" required>
</p>
<p><label for="text">Message</label> <textarea cols="40" rows="10" id="text"></textarea>
</p>
<p>
<label>&nbsp;</label><input type="submit" id="send" value="Submit">
</p>
p {
margin: 0 0 5px;
}
label {
display: block;
}
input[type="text"], textarea {
width: 320px;
}
input:required {
border: 2px solid red;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012104105
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4.318410.15X