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> |
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
