CSS:default 疑似クラスは、関連する要素のグループ内で既定となっているフォーム上の要素を表します。

このセレクターは <button><input type="checkbox"><input type="radio"><option> 要素に使用することができます。

/* Selects any default <input> */
input:default {
  background-color: lime;
}

複数選択ができるグループ化要素は複数の値を持つことがあります。つまり、最初から複数の項目が選択されていることがあります。この場合、全ての既定値が :default 疑似クラスを使用して表されます。例えば、チェックボックスの中で既定値のチェックボックスにスタイルを適用することができます。

構文

:default

HTML

<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">Winter</label>

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:default の定義
現行の標準 変更なし。
HTML5
:default の定義
勧告 HTML に関する意味付けと制約の検証を定義。
Selectors Level 4
:default の定義
草案 変更なし。
CSS Basic User Interface Module Level 3
:default の定義
勧告 初回定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応10 ?4 なし105
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ?4105 ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy, Kohei
最終更新者: mfuji09,