:indeterminate

:indeterminateCSS擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 <progress> 要素で中間の状態などです。

/* 中間の状態にある <input> をすべて選択 */
input:indeterminate {
  background: lime;
}

このセレクターが対象とする要素は以下の通りです。

構文

:indeterminate

チェックボックスとラジオボタン

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

HTML

<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">背景が緑色になるはずです</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">背景が緑色になるはずです</label>
</div>

CSS

input:indeterminate + label {
  background: lime;
}

JavaScript

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

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

プログレスバー

HTML

<progress>

CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
:indeterminate の定義
現行の標準 変更なし。
HTML5
:indeterminate の定義
勧告 HTML における意味論と制約検証の定義。
Selectors Level 4
:indeterminate の定義
草案 変更なし。

BCD tables only load in the browser