CSS 伪类

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 例子 - radio</h2>
   <fieldset>
      <legend>选择一个radio</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>喜欢的水果</h3>  
   <form action="">
      <input type="checkbox" name="flav" value="香蕉" checked> 香蕉
      <input type="checkbox" name="flav" value="葡萄"> 葡萄
      <input type="checkbox" name="flav" value="草莓"> 草莓
      <input type="checkbox" name="flav" value="苹果" checked> 苹果
      <input type="checkbox" name="flav value="火龙果"> 火龙果
      <input type="checkbox" name="flav" value="西瓜"> 西瓜
   </form>
</body>
</html>