: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

HTML

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

CSS

p {

   margin: 0 0 5px; 

}  

label {

   display: block;

}

input[type="text"], textarea { 

width: 320px; 

} 

input:required { 

border: 2px solid red;

}

Result