CSS 伪类选择器 :out-of-range 表示一个 <input>元素，其值超出了受 min 和 max 属性限制的范围。
选择器 :out-of-range 非常有用，因为它向用户提供了有关字段当前值的视觉指示，即该字段超出了允许的值范围。
伪类 :out-of-range 只能应用于在范围限制中可以具有值或取值的元素。当没有此类限制时，称元素既不在范围内也不在范围外。
语法
:out-of-range {
/* ... */
}
CSS :out-of-range示例
下面是一个示例伪类 :out-of-range
<html>
<head>
<style>
input:in-range {
background-color: beige;
padding: 5px;
border: 2px solid black;
}
input[type="number"]:out-of-range {
border: 2px solid red;
padding: 5px;
}
input:out-of-range + label::after {
content: "Sorry! Value is out of specified range.";
color: red;
background-color: aqua ;
}
p {
color: green;
}
</style>
</head>
<body>
<h2>:out-of-range pseudo-class example</h2>
<p>Enter a number in the range of 1 and 50.</p>
<p>
<input type="number" min="1" max="50" value="1" id="inrange">
<label for="inrange"></label>
</p>
</body>
</html>
