CSS - 偽類選擇器 :out-of-range

CSS 偽類選擇器:out-of-range 代表一個<input>元素，其值超出由min 和 max 屬性限定的範圍。

:out-of-range 選擇器非常有用，因為它可以向用戶直觀地指示欄位的當前值是否超出允許的值範圍。

偽類:out-of-range 只能應用於可以具有或接受範圍限制內的值的元素。如果沒有這樣的限制，則該元素既不處於in-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>

列印頁面