:indeterminate

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

:indeterminate CSS 偽類表示任何處於不確定狀態的表單元素，例如透過 JavaScript 設定為 indeterminate 狀態的複選框，作為組內成員但所有單選按鈕都未選中的單選按鈕，以及沒有 value 屬性的 <progress> 元素。

css

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

此選擇器定位的元素包括：

<input type="checkbox"> 元素，其 indeterminate 屬性設定為 true。
<input type="radio"> 元素，具有相同的 name 值且所有都未 checked。
<progress> 元素，沒有 value 屬性，使其處於不確定狀態。

語法

css

:indeterminate {
  /* ... */
}

示例

複選框和單選按鈕

此示例為與不確定表單欄位關聯的標籤應用特殊樣式。

HTML

html

<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

CSS

css

input:indeterminate + label {
  background: lime;
}

fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

JavaScript

const inputs = document.getElementsByTagName("input");

for (const input of inputs) {
  input.indeterminate = true;
}

結果

進度條

HTML

html

<progress></progress>

CSS

css

progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

結果

規範

規範
HTML # 選擇器-不確定
選擇器 Level 4 # 不確定偽類

瀏覽器相容性

另見

Web 表單 — 處理使用者資料
為網頁表單新增樣式
<input type="checkbox"> 元素的 indeterminate 屬性
<input> 及其實現的 HTMLInputElement 介面。
:checked CSS 選擇器允許你根據複選框是否被選中來為其設定樣式

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 14 日，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題