: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.

:defaultCSS擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。

試してみましょう

このセレクターが何に一致するかについては、 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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:default

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報