在網頁開發中，單選框是常用的交互控件之一，但是默認樣式比較簡陋，需要美化才能更好地融入頁面。下面介紹如何用 CSS 美化單選框。

/* 隱藏原始樣式 */
input[type="radio"] {
display: none;
}
/* 定義樣式 */
.checkbox-wrapper {
display: inline-block;
position: relative;
margin-right: 10px;
cursor: pointer;
}
.checkbox-wrapper::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
background-color: #fff;
}
.checkbox-wrapper:hover::before{
border-color: #666;
}
/* 選中狀態樣式 */
.checkbox-wrapper input[type="radio"]:checked ~::before {
background-color: #66afe9;
border-color: #66afe9;
}
/* 添加標記 */
.checkbox-wrapper::after {
content: '';
display: inline-block;
position: absolute;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
}
/* 選中狀態標記 */
.checkbox-wrapper input[type="radio"]:checked ~::after {
left: 5px;
background-color: #fff;
}

以上代碼中，首先隱藏了原始的單選框樣式，然后通過添加虛擬元素模擬單選框，定義了選中和非選中狀態的樣式，最后通過添加標記來區分選中和非選中狀態。

在使用時，只需要將單選框包裹在樣式類為"checkbox-wrapper"的容器中即可。