:out-of-range
Published on
Sometimes when we’re asking a user to fill out a form, we only want to accept a limited range to what they can fill in, like as is common when a user must be (or at least say they are) 13 or older to sign up for something.
Using the min and max attributes, we can set limits on a lot of fields, from dates to numbers and more, which can prevent the form from being submitted if their input is out of the defined range.
However, nothing is more annoying than filling out a form and only finding out you did something wrong when you hit submit, and an easy way to solve that is to provide some immediate feedback to users.
We can do that with :out-of-range, like in this example where anything below 13 will trigger additional styling.
We also have an :in-range pseudo-class, and many times I’ve used :not(:in-range), but no need for that, when we have a psuedo-class for that exact purpose!