在許多網站中，我們都可以看到多個選項供用戶選擇。而當這些選項需要單選時，我們就可以使用CSS設置一個

單選。

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

上述代碼中，

<ul>

標簽包含了三個
• ，并且每個
• 中都包含了一個元素和一個元素。

  在元素中，我們使用了來實現單選。使用name="option"屬性來指定同一組單選框，即用戶只能選擇其中一個。

  如果需要將選項顯示為圓形或其他形狀，則可以使用CSS樣式來定義樣式，如下：

  li {
  list-style-type: none; /* 禁用默認的列表符號 */
  }
  input[type="radio"] {
  display: none; /* 隱藏原有的 radio */
  }
  label {
  display: inline-block;
  position: relative;
  padding-left: 22px; /* 改變元素的空間分配使其適合形狀 */
  margin-right: 10px;
  cursor: pointer; /* 鼠標放置時顯示手形光標 */
  }
  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 碼點為選中的 radio 添加符號 */
  display: inline-block;
  position: absolute;
  left: 0;
  font-size: 14px;
  color: #007bff;
  text-align: center;
  line-height: 16px;
  }

  通過上述CSS樣式，我們可以將選項設置為圓形，并且選擇時會出現選中符號。

  總的來說，使用CSS設置

  單選很簡單，我們可以通過一些樣式來對選項進行增強，提高用戶體驗。