: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 の定義
草案 変更なし。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:indeterminateChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 10Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Applies to <input type="checkbox"> elementsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Applies to <progress> elementsChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 15Safari 完全対応 5.1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 14Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
Applies to <input type="radio"> elementsChrome 完全対応 39Edge 完全対応 79Firefox 完全対応 51IE 未対応 なしOpera 完全対応 26Safari 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
WebView Android 完全対応 39Chrome Android 完全対応 39Firefox Android 完全対応 51Opera Android 完全対応 26Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報