CSS 伪类

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

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

伪类 :in-range 只能应用于可以的元素具有或取范围限制内的值。当没有这样的限制时，该元素被称为既不在范围内也不超出范围。

语法

:in-range {
   /* ... */ 
} 
  • 1
  • 2

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: "抱歉！请输入指定范围内的值。";
      color: red;
   }

   p {
      color: green;
   }
   </style>
   </head>
   <body>
   <h2>:in-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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31