CSS的radio按鈕是一種選擇器，可以用來給使用者提供多個選項中的一種選擇。在HTML中，這個選項通常是由一個單選框組成。

如果單選框很基礎，那么通過CSS來美化它就會變得又有趣又有挑戰。

/* 通用樣式 */
input[type="radio"] {
display: none;
}
/* 未選中狀態的樣式 */
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;
}
/* 選中狀態的樣式 */
input[type="radio"]:checked + label:before {
background-color: #007bff;
border-color: #007bff;
}
/* 標簽的樣式 */
label {
display: inline-block;
cursor: pointer;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}

在這個示例中，我們通用地隱藏了`input[type="radio"]`元素，這意味著使用者不能通過單擊單選框來選擇它們的選項。要選中選項，必須通過“標簽”元素。

每個標簽都有一個與之相關聯的單選框元素。我們的樣式使用 `input[type="radio"] + label:before` 對未選中的單選框進行樣式設置，使用 `input[type="radio"]:checked + label:before` 對選中狀態的單選框進行樣式設置。我們還添加了適當的間距和光標樣式，以使它們看起來好看并易于使用。

現在您知道如何創建一個一對一的CSS即單選按鈕，您可以將其應用于您稍后構建的表單中。享受！