Jobs Hub

CSS :invalid - Style FORM INPUT fields having Invalid Inputs/Values

The CSS :invalid pseudo-class is used when we need to select and style FORM field with invalid inputs. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:invalid {color: red;}
   </style>
</head>
<body>

   <form>
      Enter Email ID: <input type="email"><br/>
      Enter a Number: <input type="number" min="10" max="100">
   </form>

</body>
</html>
Output
Enter Email ID:
Enter a Number:

In above example, when user enters an invalid email id, then the color of entered value will be red. Similarly, for the second FORM field, if user enters a value less than 10, or greater than 100, will become red colored number.

CSS Online Test

« Previous Tutorial Next Tutorial »