在網頁設計中，經常會用到單選按鈕和復選框來讓用戶進行選擇。今天，我們來講講CSS單選按鈕二選一。

首先，先看一組單選按鈕的HTML代碼：

<div class="radios">
<input type="radio" name="options" id="option1" value="option1">
<label for="option1">選項1</label>
<input type="radio" name="options" id="option2" value="option2">
<label for="option2">選項2</label>
</div>

這段代碼定義了一個名為“radios”的div，包含了兩個單選按鈕和它們對應的標簽。由于name屬性相同，兩個單選按鈕就組成了一個單選按鈕組。

接下來，我們給每個單選按鈕添加CSS樣式：

<style>
/* 隱藏原有單選按鈕 */
input[type="radio"] {
display: none;
}
/* 定義新的樣式 */
input[type="radio"] + label {
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
/* 選中狀態 */
input[type="radio"]:checked + label {
background-color: #f00;
color: #fff;
}
</style>

上面的代碼實現了以下功能：

• 隱藏原有的單選按鈕
• 為每個單選按鈕的label添加樣式
• 當單選按鈕選中時，改變其label的樣式

最后，我們來看一下效果：

現在，你可以試著選擇其中一個單選按鈕，看看效果如何。

總的來說，我們可以利用CSS樣式，將原本單調的單選按鈕轉換成更美觀、更實用的選擇按鈕，從而提升用戶體驗。