CSS3 > Selectors

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.

        input:out-of-range {
            background-color: pink;

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

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.


Back-ground color is not appearing inside the box, beacuse entered value is less than 20.

Back-ground color appering inside the box, because entered value is greater than 20.

 Views: 786 | Post Order: 12

Write for us