--- title: ':indeterminate' slug: 'Web/CSS/:indeterminate' tags: - ':indeterminate' - CSS - Layout - Pseudo-class - Reference - Selector - Web - checkbox - progress - radio button translation_of: 'Web/CSS/:indeterminate' ---
{{CSSRef}}

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

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

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

構文

{{csssyntax}}

例

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

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

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;
}

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

プログレスバー

HTML

<progress>

CSS

progress {
  margin: 4px;
}

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

結果

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}} {{Spec2('HTML WHATWG')}} 変更なし。
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}} {{Spec2('HTML5 W3C')}} HTML における意味論と制約検証の定義。
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}} {{Spec2('CSS4 Selectors')}} 変更なし。

ブラウザーの互換性

{{Compat("css.selectors.indeterminate")}}

関連情報