CSS自定義性別單選，可以為網頁表單帶來更好的用戶體驗，也可以避免用戶誤選或選擇過程中的困惑。以下是一些示例代碼和效果：

<label>
<input type="radio" name="gender" value="male">
<span class="genderLabel">男</span>
 </label>
 <label>
<input type="radio" name="gender" value="female">
<span class="genderLabel">女</span>
 </label>

上述代碼中，我們使用label標簽將輸入框和標簽包裹在一起，這樣用戶在點擊標簽時，也會觸發輸入框的選中狀態。同時，我們使用了標簽來定義標簽的樣式，例如字體大小、顏色、樣式等。

接下來，我們可以使用CSS來為單選框添加樣式：

input[type="radio"] {
display: none;
}
input[type="radio"] + .genderLabel:before {
display: inline-block;
position: relative;
top: 4px;
margin-right: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ddd;
content: '';
}
input[type="radio"]:checked + .genderLabel:before {
background-color: #007bff;
content: '\2713';
color: #fff;
font-size: 13px;
text-align: center;
line-height: 16px;
}

在上述代碼中，我們首先讓單選框不可見，然后使用:before偽類為其添加選中圓圈的樣式。當單選框被選中時，我們可以改變其背景色和內容，同時將字體顏色、大小、排版等設為合適的值。

通過以上代碼，我們可以輕松添加自定義性別單選功能，并為其添加美觀的樣式。歡迎大家嘗試并提出建議，讓我們的網頁表單變得更加美觀和易用。