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>

列印頁面