:default

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

:default CSS 偽類 選擇在一個相關元素組中作為預設值的表單元素。

試一試

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

input:default {
  border: none;
  outline: 2px solid deeppink;
}
<form>
  <p>How did you find out about us?</p>
  <label
    ><input name="origin" type="radio" value="google" checked /> Google</label
  >
  <label><input name="origin" type="radio" value="facebook" /> Facebook</label>
  <p>Please agree to our terms:</p>

  <label
    ><input name="newsletter" type="checkbox" checked /> I want to subscribe to
    a personalized newsletter.</label
  >

  <label
    ><input name="privacy" type="checkbox" /> I have read and I agree to the
    Privacy Policy.</label
  >

  <input type="submit" value="Submit form" />
</form>

此選擇器匹配的內容在 HTML 標準 §4.16.3 偽類 中定義 — 它可能匹配 <button><input type="checkbox"><input type="radio"><option> 元素。

  • 預設的選項元素是第一個帶有 selected 屬性的元素,或者是 DOM 順序中的第一個啟用的選項。允許多選的 <select> 可以有多個 selected 選項,因此所有這些都將匹配 :default
  • 如果 <input type="checkbox"><input type="radio"> 帶有 checked 屬性,則它們匹配。
  • 如果 <button><form>預設提交按鈕,則它匹配:即屬於該表單的 DOM 順序中的第一個 <button>。這同樣適用於提交表單的 <input> 型別,例如 imagesubmit

語法

css
:default {
  /* ... */
}

示例

HTML

html
<fieldset>
  <legend>Favorite season</legend>

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

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

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

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

CSS

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

input:default + label {
  color: coral;
}

結果

規範

規範
HTML
# selector-default
選擇器 Level 4
# default-pseudo

瀏覽器相容性

另見