: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

浏览器兼容性

另见