DEV Community

loading...
Cover image for :out-of-range pseudo-selector : CSS

:out-of-range pseudo-selector : CSS

rahxuls profile image Rahul ・1 min read

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" />
Enter fullscreen mode Exit fullscreen mode
input:out-of-range{
    border: 2px solid #ff0000;
}
Enter fullscreen mode Exit fullscreen mode

Demo:


⚡Thanks For Reading | Happy Designing☕

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Discussion (0)

pic
Editor guide