CSS :out-of-range Selector
The :out-of-range selector is used to select the elements that are lying outside the given range. This selector only works for input element with max and min attribute.
Example Application : Marks of a student should be from 0 to 100. If an instructor tries to enter outside range, we can highlight the value out of range.
Syntax:
:out-of-range {
// CSS property
} Example:
HTML
<!DOCTYPE html><html> <head> <title>out of range selector</title> <style> h1 { color:green; } input:out-of-range { border: 1px solid black; background-color:green; } body { text-align:center; } </style> </head> <body> <h1>GeeksForGeeks</h1> <h2>:out-of-range Selector</h2> <!-- If selected number is out of given range then the CSS property of input elements will change. --> Selected Number: <input type="number" min="5" max="25"> </body></html> |
Output:
Supported Browsers: The browser supported by :out-of-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...