在設計網頁界面時，單選框是一個常用的表單元素。然而，在某些情況下，原生的單選框樣式可能不適用于我們的設計要求。因此，我們需要借助 CSS 來修改單選框的樣式。以下是一些可供參考的樣式代碼。

/* 去掉原生單選框的默認樣式 */
input[type=radio] {
display: none;
}
/* 自定義單選框外觀 */
.radio {
display: inline-block;
border-radius: 50%; /* 圓形單選框 */
border: 1px solid #ccc;
width: 18px;
height: 18px;
margin: 2px;
position: relative;
}
/* 設置選中狀態樣式 */
.radio::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #1abc9c;
display: none;
}
/* 當單選框選中時，顯示選中狀態樣式 */
.radio input:checked + .radio::after {
display: block;
}

以上代碼使用了偽元素 ::after，當單選框被選中時，它會顯示一種圓形的綠色背景，表示選中狀態。如果需要修改單選框的顏色、大小等屬性，可以在樣式代碼中進行調整。

在 HTML 代碼中，我們需要使用 label 標簽將每個單選框與其對應的文字進行綁定，如下所示：

男女

上述代碼中，我們為每個單選框添加了一個外層的 label 標簽，并在其中添加了一個 span 標簽，用于顯示自定義的單選框樣式。通過與對應的 input 標簽綁定，我們就可以讓用戶通過點擊單選框標簽來選中相應的選項。