在許多網(wǎng)站中，我們都可以看到多個(gè)選項(xiàng)供用戶(hù)選擇。而當(dāng)這些選項(xiàng)需要單選時(shí)，我們就可以使用CSS設(shè)置一個(gè)

單選。

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

上述代碼中，

<ul>

標(biāo)簽包含了三個(gè)
• ，并且每個(gè)
• 中都包含了一個(gè)元素和一個(gè)元素。

  在元素中，我們使用了來(lái)實(shí)現(xiàn)單選。使用name="option"屬性來(lái)指定同一組單選框，即用戶(hù)只能選擇其中一個(gè)。

  如果需要將選項(xiàng)顯示為圓形或其他形狀，則可以使用CSS樣式來(lái)定義樣式，如下：

  li {
  list-style-type: none; /* 禁用默認(rèn)的列表符號(hào) */
  }
  input[type="radio"] {
  display: none; /* 隱藏原有的 radio */
  }
  label {
  display: inline-block;
  position: relative;
  padding-left: 22px; /* 改變?cè)氐目臻g分配使其適合形狀 */
  margin-right: 10px;
  cursor: pointer; /* 鼠標(biāo)放置時(shí)顯示手形光標(biāo) */
  }
  label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background-color: #fff;
  }
  input[type="radio"]:checked + label:before {
  content: "\f00c"; /* 使用 Unicode 碼點(diǎn)為選中的 radio 添加符號(hào) */
  display: inline-block;
  position: absolute;
  left: 0;
  font-size: 14px;
  color: #007bff;
  text-align: center;
  line-height: 16px;
  }

  通過(guò)上述CSS樣式，我們可以將選項(xiàng)設(shè)置為圓形，并且選擇時(shí)會(huì)出現(xiàn)選中符號(hào)。

  總的來(lái)說(shuō)，使用CSS設(shè)置

  單選很簡(jiǎn)單，我們可以通過(guò)一些樣式來(lái)對(duì)選項(xiàng)進(jìn)行增強(qiáng)，提高用戶(hù)體驗(yàn)。