CSS 伪类

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: "抱歉！数值超出指定范围。";
      color: red;
      background-color: aqua ;
   }

   p {
      color: green;
   }
   </style>
   </head>
   <body>
      <h2>:out-of-range 伪类例子</h2>
      <p>输入 1 到 50 之间的数字。</p>
      <p> 
         <input type="number" min="1" max="50" value="1" id="inrange">
         <label for="inrange"></label>
      </p>
</body>
</html>