:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:indeterminate は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、要素で中間の状態などです。

css

/* 未確定の状態にある  をすべて選択 */
input:indeterminate {
  background: lime;
}

このセレクターが対象とする要素は以下の通りです。

要素で、JavaScript によって indeterminate プロパティが true に設定されている場合
要素で、フォーム内の同じ name の値を持つすべてのラジオボタンが未選択である場合
要素で、中間の状態の場合

構文

:indeterminate

例

チェックボックスとラジオボタン

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

HTML

html


  Checkbox
  
    
    This checkbox label starts out lime.
  



  Radio
  
    
    First radio label starts out lime.
  
  
    
    Second radio label also starts out lime.

CSS

css

input:indeterminate + label {
  background: lime;
}

fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

JavaScript

const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

結果

プログレスバー

HTML

html

CSS

css

progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

結果

仕様書

Specification
HTML # selector-indeterminate
Selectors Level 4 # indeterminate-pseudo

:indeterminate

構文

例

チェックボックスとラジオボタン

HTML

CSS

JavaScript

結果

プログレスバー

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報