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>
      input:out-of-range {background-color: rgb(49, 95, 95); color: white;}

      Input a Number: <input type="number" min="50" max="500">
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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube