Jobs Hub

CSS :out-of-range

The CSS :out-of-range pseudo-class is used when we need to apply style to an INPUT element of a form, when the value given by user, is out of specified limit. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:out-of-range {background-color: rgb(49, 95, 95); color: white;}
   </style>
</head>
<body>

   <form>
      Input a Number: <input type="number" min="50" max="500">
   </form>
   
</body>
</html>
Output
Input a Number:

If you type any number other than 50 to 500, then you'll see the change in background color and value, of the input field.

Note - The :out-of-range pseudo-class works only with INPUT element having MIN and/or MAX attribute(s).

CSS Online Test

« Previous Tutorial Next Tutorial »