MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

概要

:indeterminate CSS 疑似クラス は、以下の状態を表します:

  • JavaScript によって indeterminate DOM 属性が true に設定されている <input type="checkbox"> 要素
  • ラジオボタングループ内のラジオボタンがすべて未選択である <input type="radio"> 要素
  • indeterminate 状態の <progress> 要素

構文

:indeterminate { style properties }

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

CSS

input, span {
  background: red;
}

:indeterminate, :indeterminate + label {
  background: lime;
}

HTML

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

JavaScript

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

progress 要素

CSS

:indeterminate {
  opacity: 0.5;
}

HTML

<progress>

表示結果

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
:indeterminate の定義
現行の標準 変更なし
HTML5
:indeterminate の定義
勧告 HTML と 制約バリデーションに関して意味論の定義
Selectors Level 4
:indeterminate の定義
草案 変更なし
CSS Basic User Interface Module Level 3
:indeterminate の定義
勧告候補 疑似クラスを定義。意味論との関連付けはなし。

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
type="checkbox" (有) 3.6 (1.9.2) 9.0 (有) 10.60 (2.6) 3.0
<progress> 6.0 6.0 (6.0) 10 (有) ? 5.2
type="radio" 39.0 51 (51)[1] 未サポート 未サポート[2] ? 未サポート[3]
機能 Android Firefox Mobile (Gecko) IE Mobile Edge Opera Mobile Safari Mobile
type="checkbox" ? 1.0 (1.9.2) ? (有) ? ?
<progress> ? 6.0 (6.0) ? (有) ? ?
type="radio" 39.0 51.0 (51.0)[1] 未サポート 未サポート[2] ? 未サポート[3]

[1] バグ 885359 で実装しました。

[2] Edge bug 7124038 をご覧ください。

[3] WebKit bug 156270 をご覧ください。

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, sosleepy, Level
 最終更新者: yyss,