CSS自定義單選（Custom Radio Buttons）是指在HTML中使用元素時，通過CSS樣式將其外觀替換成自定義的樣式。通過自定義單選按鈕，可以將網站或應用程序的外觀和風格與眾不同，增強用戶交互體驗。

要創建自定義單選按鈕，需要了解CSS的偽元素可以用于控制其外觀。使用偽元素:before和:after可以創建兩個元素，然后利用CSS屬性content給偽元素添加文字或小圖標。我們還需要使用CSS的display屬性將輸入元素的默認樣式設置為none，讓自定義樣式完全取代掉默認的樣式。

input[type="radio"] {
display: none; /* 隱藏默認單選樣式 */
}
input[type="radio"] + label:before {
content: ""; /* 設置偽元素內容為空 */
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #555;
border-radius: 50%;
}
input[type="radio"]:checked + label:before {
background-color: #555; /* 設置選中時的顏色 */
}
input[type="radio"] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* 為偽元素添加小圖標 */
input[type="radio"] + label:before {
content: "\f111";
font-family: "FontAwesome";
}

上述代碼創建了一組沒有標簽的單選按鈕。通過與元素的偽元素:before配合使用，為單選按鈕添加了帶圓角和邊框的陰影效果。設置選中時的顏色和選中的樣式。

在實際開發中，為了方便管理和樣式的復用，可以將自定義單選按鈕樣式定義為class，然后在HTML代碼中引用這個class。例如：

.radio-btn {
display: none;
}
.radio-btn + label:before {
/* 樣式略 */
}
.radio-btn:checked + label:before {
/* 樣式略 */
}
.radio-btn + label {
/* 樣式略 */
}

在HTML代碼中引用：

男女

需要注意的是，使用元素時，必須給相同名稱的單選按鈕設置相同的name屬性，以確保用戶只能選擇一個選項。