CSS3的出現(xiàn)為我們美化頁面帶來了更多的可能性。在表單元素中，radio單選框一直都是比較難以美化的元素，但是在CSS3中，我們可以通過一些簡單的樣式來美化radio單選框。

input[type="radio"] {
/* 隱藏原始radio */
display: none;
}
input[type="radio"] + label {
/* 顯示自定義的radio圖標(biāo) */
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ccc;
}
input[type="radio"]:checked + label {
/* 選中時改變radio圖標(biāo)樣式 */
background-color: #37b8d4;
border-color: #37b8d4;
}
input[type="radio"] + label::before {
/* 創(chuàng)建radio圖標(biāo) */
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: transparent;
}
input[type="radio"]:checked + label::before {
/* 選中時顯示填充色 */
background-color: #fff;
}

以上是一個簡單的樣式代碼，它是通過將原始radio隱藏，并利用label標(biāo)簽與::before偽元素來創(chuàng)建自定義的radio圖標(biāo)。通過選中時改變背景和邊框色，以及圓點的填充色，來使選中和未選中狀態(tài)的radio單選框樣式不同。

除了以上示例外，當(dāng)然還有更多的樣式可以使用，比如使用圖片來代替radio圖標(biāo)，或者在鼠標(biāo)懸停時改變樣式等等。總的來說，利用CSS3來美化radio單選框有無限的可能性，只需要發(fā)揮你的想像力即可。