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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:indeterminateChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="checkbox"Chrome ? Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 10.6Safari 完全対応 3WebView Android ? Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="radio"Chrome 完全対応 39Edge 未対応 なし
補足
未対応 なし
補足
補足 See Edge bug 7124038.
Firefox 完全対応 51IE 未対応 なしOpera 完全対応 26Safari 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
WebView Android 完全対応 39Chrome Android 完全対応 39Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 See Edge bug 7124038.
Firefox Android 完全対応 51Opera Android ? Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
Samsung Internet Android ?
<progress>Chrome 完全対応 6Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 37Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 6Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

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

このページの貢献者: mdnwebdocs-bot, junerClarinet, yuheiy, mfuji09, yyss, ethertank, sosleepy, Level
最終更新者: mdnwebdocs-bot,