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
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
type="checkbox"Chrome ? Edge 完全対応 ありFirefox 完全対応 3.6IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 3WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="radio"Chrome 完全対応 39Edge 未対応 なし
補足
未対応 なし
補足
補足 See Edge bug 7124038.
Firefox 完全対応 51IE 未対応 なしOpera ? Safari 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
WebView Android 完全対応 39Chrome Android ? Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 See Edge bug 7124038.
Firefox Android 完全対応 51Opera Android ? Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 156270.
Samsung Internet Android ?
<progress>Chrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera ? Safari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 6Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

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

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