Inputs are very powerful and important pieces of any application, regardless of the platform. They represent the commonly used point of interaction users actually have. So ensuring they are styled properly for the various situations they encounter is important for immediate feedback. With that in mind, think of inputs for numeric value. Wouldn’t it be great to have a simple way to style for when a user enters a number that is above the allowed max value? Well luckily, there is!
CSS allows for this with the pseudoclass :out-of-range. This allows for the selection of any input that has a value that is outside the range of its max and min value(s) set on any respective input field. Let’s look at the code!
input:out-of-range {
border-bottom: 1px solid red;
color: red;
font-weight: bold;
}There you go. With that little bit of code, any input that isn’t within the range you set will get that applied to it. No JS required!