:default
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
試してみましょう
このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — <button>
、<input type="checkbox">
、<input type="radio">
、<option>
要素に一致させることができます。
- 既定の option 要素は
selected
属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。multiple
が付いた<select>
は、複数のselected
がついた選択肢を持つことができますので、すべてが:default
に一致します。 <input type="checkbox">
と<input type="radio">
はchecked
属性があるときに一致します。<button>
は<form>
の 既定の送信ボタンである場合に一致します。フォームに所属する<button>
のうち、 DOM 順で最初のものです。これはフォームを送信する<input>
型、例えばimage
またはsubmit
にも適用されます。
構文
:default
例
HTML
html
<fieldset>
<legend>Favorite season</legend>
<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>
</fieldset>
CSS
css
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
結果
仕様書
Specification |
---|
HTML # selector-default |
Selectors Level 4 # default-pseudo |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:default |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.