CSS - :indeterminate 偽類

CSS 偽類選擇器 :indeterminate 表示狀態不確定或未知的元素。

更具體地說，:indeterminate 偽類目標以下元素：

複選框 - <input type="checkbox"> 其 indeterminate 值設定為 true。
單選按鈕 - <input type="radio"> 其單選按鈕組中沒有選中任何單選按鈕。
進度元素 - <progress> 處於不確定狀態，即沒有 value 屬性。

語法

:indeterminate

CSS :indeterminate 示例

以下是如何在複選框和單選按鈕中使用 :indeterminate 偽類的示例

<html>
<head>
<style>
   input[type="checkbox"]:indeterminate {
      box-shadow: 0 0 5px 5px rgb(224, 5, 5);
   }

   input[type="radio"]:indeterminate {
      box-shadow: 0 0 5px 5px rgb(17, 235, 28);
   }

   div {
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>:indeterminate selector example</h2>
   <form>
      <div>
         <input type="checkbox" id="box"> Checkbox
      </div>
      <div>
         <input type="radio" id="box1"> Radio
      </div>
      <script>
         var checkbox=document.getElementById("box");
         checkbox.indeterminate=true;

         var radio=document.getElementById("box1");
         radio.indeterminate=true;
      </script>
   </form>
</body>
</html>

以下是如何在單選按鈕組中使用 :indeterminate 偽類的示例

<html>
<head>
<style>
   label {
      margin-right: .5em;
      position: relative;
      top: 1px;
   }
   input[type="radio"]:indeterminate + label {
      color: magenta;
      font-size: larger;
   }
   form {
      border: 3px solid black;
      width: 500px;
   }
</style>
</head>
<body>
   <h2>:indeterminate selector example</h2>
   <form>
      <p>The state of radio button group is indeterminate, hence CSS styling applied.</p>
      <p>Select any radio button and see the change:</p>
      <input type="radio" name="option" value="true" id="true">
      <label for="true">True</label>
      <input type="radio" name="option" value="false" id="false">
      <label for="false">False</label>
      <input type="radio" name="option" value="unknown" id="unknown">
      <label for="unknown">Unknown</label>
   </form>
</body>
</html>

以下是如何在進度元素中使用 :indeterminate 偽類的示例

<html>
<head>
<style>
   progress {
      margin: 8px;
   }

   progress:indeterminate {
      width: 300px;
      height: 50px;
   }
</style>
</head>
<body>
   <h2>:indeterminate selector example - progress</h2>
   <progress></progress>
</body>
</html>

列印頁面