In-range selector in CSS3

How to select the elements with value within a specified range in CSS3?

By using In-range selector we can select the elements with a value within a specified range. That is shown in the below example code.

<style>
        input:in-range {
            background-color: pink;
        }
</style>

<body>
    <form>
        <label>Enter Number:</label>
        <input type="number" min="1" max="20" />
        <br />
    </form>

In the above code snippet, we have given In-range to the <input> element of min attribute with value "1" and max attribute with value "20". In the output we can observe that if we enter the numbers from 1 to 20 there will be back-ground colour inside the text box after that it will disppear. At the same time the increment arrow only works up to value "20" it is due to max attribute value, after that we need to enter the numbers manually. That is shown clearly in the DEMO URL.

OUTPUT