CSS - 伪类 :default

CSS 伪类选择器:default 选择在相似或相关元素组中作为默认值的表单元素。

此伪类可能匹配<button>，<input type="checkbox">，<input type="radio">和<option>元素，方式如下：

对于<button>，如果它是<form>的提交按钮。它也适用于提交表单的<input>类型。
如果为<input type="checkbox">和<input type="radio">指定了checked属性。
第一个具有selected属性的选项元素。对于多个<select>，如果有多个选定的选项，所有选项都将匹配: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伪类用于复选框的示例，其中多个选项具有选中状态。在这里，我们看到多个复选框被标记为checked（默认值）。因此，样式仅应用于那些作为默认值的复选框。

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

打印页面