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>
      input:invalid {color: red;}

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

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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube