CSS默認(rèn)單選設(shè)置

在CSS中，設(shè)置默認(rèn)單選可以通過(guò)使用HTML的<input>元素和CSS的偽類(lèi)來(lái)實(shí)現(xiàn)，以下是一個(gè)簡(jiǎn)單的示例，展示了如何設(shè)置默認(rèn)單選：

1、在HTML中創(chuàng)建一個(gè)包含多個(gè)<input>元素的表單，每個(gè)元素表示一個(gè)不同的選項(xiàng)。

<form>
  <input type="radio" id="option1" name="option" value="1"> 選項(xiàng)1<br>
  <input type="radio" id="option2" name="option" value="2"> 選項(xiàng)2<br>
  <input type="radio" id="option3" name="option" value="3"> 選項(xiàng)3<br>
</form>

2、使用CSS的偽類(lèi):checked來(lái)設(shè)置默認(rèn)選中的選項(xiàng)，如果你想默認(rèn)選中“選項(xiàng)2”，可以編寫(xiě)以下CSS代碼：

input[name="option"] {
  display: none;
}
input[name="option"] + label {
  display: inline-block;
  margin-right: 10px;
}
input[name="option"][value="2"] + label {
  color: blue; /* 選中狀態(tài)的樣式 */
}

在這個(gè)示例中，我們首先將所有<input>元素隱藏，然后通過(guò)+ label選擇器顯示每個(gè)選項(xiàng)的標(biāo)簽，我們通過(guò)[value="2"]選擇器選中“選項(xiàng)2”，并將其標(biāo)簽顏色設(shè)置為藍(lán)色以區(qū)分其他選項(xiàng)。

這種方法僅適用于支持CSS偽類(lèi)的瀏覽器，如果你需要更廣泛的兼容性，可以考慮使用JavaScript或jQuery來(lái)設(shè)置默認(rèn)單選。