Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
セレクター Widely available

:default

checked属性が初期設定されているフォーム要素を選択する擬似クラスです。フォームの初期状態を視覚的に示すことで、ユーザーがデフォルト選択肢を認識しやすくなります。ユーザーが選択を変更した後でも、元のデフォルト要素を強調表示し続けます。

フォーム擬似クラスデフォルト要素

概要

checked属性が初期設定されているフォーム要素を選択する擬似クラスです。フォームの初期状態を視覚的に示すことで、ユーザーがデフォルト選択肢を認識しやすくなります。ユーザーが選択を変更した後でも、元のデフォルト要素を強調表示し続けます。

対応ブラウザ

デスクトップ

Chrome 10+
Edge 79+
Safari 5+
Firefox 4+

モバイル

Chrome Android 18+
Safari iOS 5+
Firefox Android 4+

基本構文

CSS 
input:default {
  outline: 2px solid #3b82f6;
}
input:default + label {
  font-weight: bold;
}

実務での使いどころ

  • 推奨オプションの視覚的強調

    料金プランの選択肢で推奨プランにchecked属性を設定し、:defaultでハイライト表示してユーザーの意思決定を支援します。

注意点

  • :defaultはHTML属性の初期状態に基づくため、JavaScriptで動的にcheckedを変更しても:defaultの対象は変わりません。

アクセシビリティ

  • デフォルト選択の視覚的強調は色だけに頼らず、テキストラベルやアイコンなど複数の手段で伝えてください。

参考リンク