The :in-range selector is used to select all elements that is given within a particular range values. It is mostly used in 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
leave a comment
0 Comments