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 の定義 |
勧告 | 初回定義、但し意味の結びつけの定義はなし |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:default | Chrome 完全対応 10 | Edge 未対応 なし | Firefox 完全対応 4 | IE 未対応 なし | Opera 完全対応 10 | Safari 完全対応 5 | WebView Android 完全対応 37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 5 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応