CSS | :in-range Selector
The :in-range selector is used to selecting all elements that are given within a particular range value. It is mostly used in an input element with type min/max attribute.
Syntax:
:in-range {
// CSS property
}
Example:
<!DOCTYPE html> <html> <head> <title>in range selector</title> <style> h1 { color:green; } input:in-range { border: 1px solid black; background:green; color:white; } body { text-align:center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>:in-range Selector</h2> <!-- If selected number is less then 20 and greater then 40 then the CSS property of input elements will change. --> Select Number: <input type="number" min="20" max="40"> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by :in-range selector are listed below:
- Apple Safari 10.1
- Google Chrome 53.0
- Firefox 50.0
- Opera 40.0
- Internet Explorer 13.0
Recommended Posts:
- CSS | ::before selector
- CSS | ::after Selector
- CSS | #id Selector
- CSS | :not Selector
- CSS | * Selector
- CSS | :nth-child() Selector
- CSS | ::first-line Selector
- CSS | ::first-letter Selector
- CSS | :indeterminate Selector
- CSS | :nth-last-child() Selector
- CSS | [attribute=value] Selector
- CSS | :nth-last-of-type() Selector
- CSS | [attribute$=value] Selector
- CSS | :last-child Selector
- CSS | :link Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
