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:
html
<!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 5.1 and above
- Google Chrome 10.0 and above
- Edge 13.0 and above
- Firefox 29.0 and above
- Opera 11.0 and above
Please Login to comment...