Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

:indeterminate

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

css

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

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

<input type="checkbox"> 要素で、JavaScript によって indeterminate プロパティが true に設定されている場合

<input type="radio"> 要素で、フォーム内の同じ name の値を持つすべてのラジオボタンが未選択である場合

<progress> 要素で、中間の状態の場合

疑似クラスフォーム状態

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:indeterminate`	1	12	2	3	18	1
`checkbox` `<input type="checkbox">` 要素に適用されます	1	12	3.6	3	18	1
`progress` `<progress>` 要素に適用されます	6	12	6	5.1	18	5
`radio` `<input type="radio">` 要素に適用されます	39	79	51	10	39	10

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

input:indeterminate {
  opacity: 0.5;
}
progress:indeterminate {
  animation: pulse 1.5s infinite;
}

ライブデモ

progressba-(value none=indeterminate)

CSS progressba-(value none=indeterminate) demo.

プレビュー全画面表示

radio button(selection=indeterminate)

CSS radio button(selection=indeterminate) demo.

プレビュー全画面表示

実務での使いどころ

部分選択状態のチェックボックス表示

ツリービューなどで子要素の一部のみが選択されている場合に、親チェックボックスを中間状態としてスタイリングします。

注意点

indeterminate状態はHTMLの属性ではなくJavaScriptのプロパティでのみ設定可能です。HTMLだけでは制御できません。