:indeterminate

CSS:indeterminate 疑似クラス は、中間の状態にあるフォームの要素を表します。

/* 中間の状態にある <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;
}

プログレスバー

CSS

<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 の定義
草案 変更なし。
CSS Basic User Interface Module Level 3
:indeterminate の定義
勧告 疑似クラスの定義、ただし意味論との結び付はなし。

ブラウザー実装状況

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

凡例

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