Jobs Hub

CSS :valid - Style Field when Input is Valid

The CSS :valid pseudo-class is used when we need to style FORM ELEMENTs when user provides valid value. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:valid {background-color: green; color: white;}
   </style>
</head>
<body>

   <form>
      Email ID: <input type="email"><br/>
      Enter a Number (10-50): <input type="number" min="10" max="50">
   </form>
   
</body>
</html>
Output
Email ID:
Enter a Number (10-50):

When we supply the valid value in above input fields, then the applied style can be seen. For example, if you type any number say 10, 11, 12, ..., 50 in the second field, then the style gets applied. Otherwise, on providing any number like 1, 2, 3, etc., other than 10 to 50, the defined style will not be applied.

CSS Online Test

« Previous Tutorial Next Tutorial »