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 the user is outside the 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:

In CSS, the :out-of-range pseudo-class is used to target form elements with values outside of the specified range. The input :out-of-range selector in this code targets the input element with a minimum value of 50 and a maximum value of 500.

When a number outside of this range is entered by the user, the CSS styles specified within the curly braces are applied to the input element. The background-color property in this case is set to rgb(49, 95, 95), which is a dark green color, and the color property is set to white, which makes the text within the input element white.

These styles are applied to the input element to visually inform the user that their input is outside of the permitted range. The contrast between the dark green background and the white text makes it easier for the user to identify and correct their input.

If the user enters a number within the specified range, the :out-of-range pseudo-class is removed, and the input element no longer has the specified styles. This means that the input element's background and text colors will be set to their default values.

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

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

Advantages of the ":out-of-range" class in CSS

Disadvantages of the ":out-of-range" class in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!