【CSS Modules】:indeterminate疑似クラスの使い方

:indeterminate擬似クラスは、ユーザーインターフェース要素の「未決定」または「中間」の状態を選択するためのCSSセレクタです。この擬似クラスは、主に<input type="checkbox">、<input type="radio">、および<progress>要素に適用されます。

チェックボックスの場合、完全にチェックされているわけでも、全くチェックされていないわけでもない「混合」状態を示すために使用されます。例えば、ツリービュー形式で、親チェックボックスが子要素の一部だけが選択されている状態にある場合などがこれに該当します。この状態は通常、JavaScriptを介してelement.indeterminate = true;のようにプログラム的に設定され、ユーザーの直接的な操作では発生しません。これにより、ユーザーは視覚的にその状態を区別できます。

ラジオボタンの場合、グループ内のどのオプションも初期選択されていない状態、つまりユーザーがまだ選択を行っていない状態を示す際に使用できます。また、<progress>要素では、タスクの進捗状況が不明であるか、計算中であるといった不定の状態を表すために用いられます。

:indeterminate擬似クラスを使用することで、これらの特殊な状態にある要素に対して、通常のチェック済みや未チェックの状態とは異なるスタイルを適用し、ユーザーインターフェースの表現力を高めることができます。これにより、開発者はUIの状態をより直感的に表現し、ユーザーは複雑な状況でも要素の状態を容易に把握できるようになります。

Copy
1input:indeterminate {
2  /* ここにスタイルを記述 */
3  border: 2px dashed orange;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません