:in-range Back

• :in-range is a CSS pseudo-class used to style elements that have range limitations when the value that the element bound to is within the specified range limits.
• In other words, it matches an element when the value of its value attribute is within the range limitations specified on it.

　Case: input number

<input type="number" min="1" max="10" value="8">

/*
 * As long as the value is between 1 and 10,
 * the input will match the :in-range selector and can be styled.
 */
input[type="number"]:in-range {
    /** styles here */
}

See the Pen dGVwmW by aleen42 (@aleen42) on CodePen.

Note

• In comparison with :in-range, an element whose value is out of the specified range can be selected and styled using the :out-of-range pseudo-class selector.