CSS 伪类选择器 :default 选择在相似或相关元素组中作为默认值的表单元素。
此伪类可以按以下方式匹配 <button>、<input type=“checkbox”>、<input type=“radio”> 和 <option> 元素：
- 如果是<button>，则是<form>的提交按钮。它也适用于提交表单的<输入>类型。
- 如果为 <input type=“checkbox”> 和 <input type=“radio”>指定了 checked 属性。
- 具有 selected 属性的第一个选项元素。如果有多个 <select>s，则有多个选定选项，所有选项都将匹配 :default。
语法
:default {
/* ... */
}
CSS :default 示例
下面是单选按钮的 :default 伪类的示例。此处的样式适用于默认值（“A 和 B”）。
<html>
<head>
<style>
fieldset {
width: 500px;
height: 50px;
}
input:default {
box-shadow: 0 0 4px 3px lightgreen;
}
input:default + label {
color: crimson;
}
</style>
</head>
<body>
<h2>:default example - radio</h2>
<fieldset>
<legend>Choose option</legend>
<input type="radio" name="option" id="onlya" value="onlyA" />
<label for="onlyA">Only A</label>
<input type="radio" name="option" id="onlyb" value="onlyB" />
<label for="onlyB">Only B</label>
<input type="radio" name="option" id="both" value="bothAB" checked/>
<label for="bothAB">Both A & B</label>
<input type="radio" name="option" id="none" value="none" />
<label for="none">None</label>
</fieldset>
</body>
</html>
下面是复选框的 :default 伪类示例，其中多个选项具有选定状态。在这里，我们看到多个复选框被标记为选中（默认值）。因此，样式仅应用于这些默认复选框。
<html>
<head>
<style>
form {
display: inline-block;
}
input[type="checkbox"]:default {
box-shadow: 0 0 3px 3px red;
}
</style>
</head>
<body>
<h3>Select Flavor</h3>
<form action="">
<input type="checkbox" name="flav" value="butterscotch" checked> Butterscotch
<input type="checkbox" name="flav" value="Chocolate"> Chocolate
<input type="checkbox" name="flav" value="cookiencream"> Cookie n Cream
<input type="checkbox" name="flav" value="hazelnut" checked> Hazelnut
<input type="checkbox" name="flav value="almond"> Roasted Almond
<input type="checkbox" name="flav" value="strawberry"> Strawberry
</form>
</body>
</html>
