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 の定義
勧告 初回定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:defaultChrome 完全対応 10Edge 未対応 なしFirefox 完全対応 4IE 未対応 なしOpera 完全対応 10Safari 完全対応 5WebView Android 完全対応 37Chrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

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

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