We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 の定義
勧告案 疑似クラスの定義、ただし意味論との結び付はなし。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
type="checkbox" ? あり3.6910.63
type="radio"39 なし151 なし ? なし2
<progress>6 あり610 ? あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり あり ? ? ?
type="checkbox" ? ? あり4 ? ? ?
type="radio"39 ? なし151 ? なし2 ?
<progress> ? ? あり6 ? ? ?

1. See Edge bug 7124038.

2. See WebKit bug 156270.

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

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