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

:default擬似クラスは、ユーザーインターフェースにおいて初期値として設定されている要素や、フォームのデフォルトの動作に関連する要素を表す擬似クラスです。主にHTMLのフォーム要素に対して適用され、ユーザーが特別な操作をしなくても選択されている状態や、デフォルトのアクションを提供する要素を識別し、スタイリングするために使用されます。

具体的には、<select>要素の中でselected属性が指定されている<option>要素を選択するために使われます。これにより、ドロップダウンリストの初期選択肢を視覚的に強調できます。また、複数のラジオボタン（<input type="radio">）やチェックボックス（<input type="checkbox">）の中から、checked属性が指定され、デフォルトで選択状態にある要素を選択することも可能です。

さらに、<form>要素内に含まれる複数の<button>要素のうち、そのフォームのデフォルトの送信ボタンとして機能するものを選択する際にも利用されます。このボタンは、フォームの入力フィールドでEnterキーを押した際に自動的に実行されるアクションと関連付けられています。

:default擬似クラスを使用することで、ユーザーがフォームを操作する前に、どの選択肢が初期値であるか、あるいはどのボタンがデフォルトアクションと関連付けられているかを明確に示し、ユーザー体験を向上させるためのCSSスタイリングを適用することができます。

Copy
1button:default {
2  border: 2px solid blue;
3  background-color: lightblue;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません