CSS的radio按鈕是一種選擇器，可以用來(lái)給使用者提供多個(gè)選項(xiàng)中的一種選擇。在HTML中，這個(gè)選項(xiàng)通常是由一個(gè)單選框組成。

如果單選框很基礎(chǔ)，那么通過(guò)CSS來(lái)美化它就會(huì)變得又有趣又有挑戰(zhàn)。

/* 通用樣式 */
input[type="radio"] {
display: none;
}
/* 未選中狀態(tài)的樣式 */
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 10px;
vertical-align: middle;
}
/* 選中狀態(tài)的樣式 */
input[type="radio"]:checked + label:before {
background-color: #007bff;
border-color: #007bff;
}
/* 標(biāo)簽的樣式 */
label {
display: inline-block;
cursor: pointer;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}

在這個(gè)示例中，我們通用地隱藏了`input[type="radio"]`元素，這意味著使用者不能通過(guò)單擊單選框來(lái)選擇它們的選項(xiàng)。要選中選項(xiàng)，必須通過(guò)“標(biāo)簽”元素。

每個(gè)標(biāo)簽都有一個(gè)與之相關(guān)聯(lián)的單選框元素。我們的樣式使用 `input[type="radio"] + label:before` 對(duì)未選中的單選框進(jìn)行樣式設(shè)置，使用 `input[type="radio"]:checked + label:before` 對(duì)選中狀態(tài)的單選框進(jìn)行樣式設(shè)置。我們還添加了適當(dāng)?shù)拈g距和光標(biāo)樣式，以使它們看起來(lái)好看并易于使用。

現(xiàn)在您知道如何創(chuàng)建一個(gè)一對(duì)一的CSS即單選按鈕，您可以將其應(yīng)用于您稍后構(gòu)建的表單中。享受！