---

New Shorty post on CSS after a long time. We'll learn about the :out-of-range selector.

As the name says, the :out-of-range CSS pseudo-class select elements whose current value is outside the range limits specified by the min and max attributes. It works on an <input> element.

It is only applicable to the elements that have range limitation set.

<input type="number" min="5" max="10" />

input:out-of-range{
    border: 2px solid #ff0000;
}

Demo:

---

⚡Thanks For Reading | Happy Designing☕