CSS :required - Style Required Field

The CSS :required pseudo-class is used when we need to style FORM ELEMENTs having REQUIRED attribute. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:required {background-color: #ccc; padding: 6px; font-weight: bold;}
   </style>
</head>
<body>

   <form>
      Username: <input type="text" required><br/><br/>
      Email ID: <input type="email"><br/><br/>
      Password: <input type="password" required><br/><br/>
   </form>
   
</body>
</html>
Output
Username:

Email ID:

Password:

CSS Online Test


« Previous Tutorial Next Tutorial »