Out-of-range selector in CSS3

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

By using Out-of-range selector we can select the elements with a value which is outside a specific range. That is shown in the below example code.

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

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

In the above code snippet, we have given Out-of-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 no back-ground colour inside the text box, if we enter the values after 20 the back-ground colour will appear inside the box. 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