CSS - 伪类 :in-range

CSS 伪类选择器 :in-range 表示一个 <input>元素，其值在 min 和 max 属性限制的范围内。

选择器 :in-range 非常有用，因为它为用户提供了有关字段当前值的视觉指示，无论它是否在允许的值范围内。

伪类 :in-range 只能应用于在范围限制中可以具有值或取值的元素。当没有此类限制时，称元素既不在范围内也不在范围外。

语法

:in-range {
   /* ... */ 
}

CSS :in-range 示例

下面是 :in-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! Enter a value within the specified range.";
      color: red;
   }

   p {
      color: green;
   }
   </style>
   </head>
   <body>
   <h2>:in-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>

打印本页