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

:default CSS pseudo-class 表示一组相关元素中的默认表单元素。

该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。

css
/* Selects any default <input> */
input:default {
  background-color: lime;
}

允许多个选择的分组元素也可以具有多个默认值,即,它们可以具有最初选择的多个项目。在这种情况下,所有默认值都使用 :default 伪类表示。例如,你可以在一组复选框之间设置默认复选框。

语法

Error: could not find syntax for this item

示例

HTML

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

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