CSS的單選框樣式是網頁設計中常用的元素之一。默認情況下，瀏覽器提供了一些簡單的樣式，但這些樣式通常無法滿足我們的需求。如何自定義單選框的樣式是我們需要了解的。

/*默認樣式*/
input[type="radio"]{
-webkit-appearance: radio;
}

上面的代碼是瀏覽器默認的單選框樣式。可以看到，該樣式使用的是CSS3的屬性 -webkit-appearance，這個屬性可以讓元素具有系統默認的外觀或者將其重置為自定義。

/*自定義樣式*/
input[type="radio"] {
-webkit-appearance: none;/*去掉默認樣式*/
outline: none;/*去掉外邊框*/
width: 20px;
height:20px;
border-radius: 50%;/*圓形樣式*/
border: 1px solid #ddd;/*邊框*/
background-color: #fff;
vertical-align: middle;
cursor: pointer;
}
input[type="radio"]:checked::before {
content: "\2713";/*√*/
display: inline-block;
font-size: 14px;
line-height: 1;
width: 20px;
height: 20px;
border-radius: 50%;/*圓形樣式*/
text-align: center;
color: #fff;
background-color: #007bff;
}

這就是一個簡單的自定義單選框樣式的代碼。從上面可以看到，該樣式使用了圓形樣式，并且在選中狀態下使用了√來表示選擇。其中，content屬性可以插入一些字符或者其他的一些內容，該屬性常用于:before或:after偽元素中。選擇器:checked用于選中狀態的樣式設置。

通過以上代碼，我們可以得到一個美觀且實用的自定義單選框樣式。大家可以根據自己的需求改變樣式，制作出更好看的單選框樣式。