:default
:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | 79 | 4 | 5 | 18 | 5 | |
基本構文
CSS
input:default {
outline: 2px solid #3b82f6;
}
input:default + label {
font-weight: bold;
}ライブデモ
実務での使いどころ
-
推奨オプションの視覚的強調
料金プランの選択肢で推奨プランにchecked属性を設定し、:defaultでハイライト表示してユーザーの意思決定を支援します。
注意点
- :defaultはHTML属性の初期状態に基づくため、JavaScriptで動的にcheckedを変更しても:defaultの対象は変わりません。
アクセシビリティ
- デフォルト選択の視覚的強調は色だけに頼らず、テキストラベルやアイコンなど複数の手段で伝えてください。