Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
インタラクション Widely available

:indeterminate

JavaScriptでindeterminate状態に設定されたチェックボックスや、グループ内のいずれも選択されていないラジオボタンにマッチします。「一部選択」や「未選択」の状態を視覚的に表現するためのスタイリングに使用します。ツリービューの部分選択やプログレスバーの不定状態など、UIの中間状態を表現する際に重要です。

疑似クラスフォーム状態

概要

JavaScriptでindeterminate状態に設定されたチェックボックスや、グループ内のいずれも選択されていないラジオボタンにマッチします。「一部選択」や「未選択」の状態を視覚的に表現するためのスタイリングに使用します。ツリービューの部分選択やプログレスバーの不定状態など、UIの中間状態を表現する際に重要です。

対応ブラウザ

デスクトップ

Chrome 39+
Edge 79+
Safari 10+
Firefox 51+

モバイル

Chrome Android 39+
Safari iOS 10+
Firefox Android 51+

基本構文

CSS 
input:indeterminate {
  opacity: 0.5;
}
progress:indeterminate {
  animation: pulse 1.5s infinite;
}

実務での使いどころ

  • 部分選択状態のチェックボックス表示

    ツリービューなどで子要素の一部のみが選択されている場合に、親チェックボックスを中間状態としてスタイリングします。

注意点

  • indeterminate状態はHTMLの属性ではなくJavaScriptのプロパティでのみ設定可能です。HTMLだけでは制御できません。

アクセシビリティ

  • indeterminate状態のチェックボックスにはaria-checked='mixed'を設定し、スクリーンリーダーに中間状態が正しく伝わるようにしてください。

参考リンク