CSS是前端開發中不可缺少的部分，它能夠為HTML文檔增加豐富的樣式和交互效果。有時候我們需要為用戶提供選擇性別的功能，下面介紹如何使用CSS添加男女選項。

/* 創建一個選擇框，并設置好樣式 */
.select-box {
display: inline-block;
position: relative;
padding: 0 40px 0 10px;
line-height: 34px;
font-size: 14px;
color: #333;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
background-color: #fff;
box-sizing: border-box;
}
/* 在選擇框旁邊添加一個下拉箭頭 */
.select-box::after {
content: '';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
border-top: 6px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* 創建選項菜單 */
.select-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
padding: 8px 0;
margin-top: 1px;
border: 1px solid #ccc;
border-top: none;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 設置選項菜單中每一項的樣式 */
.select-menu li {
list-style: none;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333;
padding: 0 10px;
cursor: pointer;
background-color: #fff;
}
/* 鼠標懸停時改變選項菜單中每一項的樣式 */
.select-menu li:hover {
background-color: #f4f4f4;
}
/* 當選擇框被聚焦或被鼠標點擊時，顯示選項菜單 */
.select-box:focus+.select-menu,
.select-box.active+.select-menu {
display: block;
}
/* 當選項菜單中的某一項被選中時，改變選擇框的顯示內容 */
.select-menu li:hover,
.select-menu li.selected {
background-color: #f4f4f4;
}
/* 設置男女選項的樣式 */
.select-menu .gender-selection {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
border-radius: 50%;
}
/* 設置男女選項中圖標的背景顏色 */
.select-menu .male .gender-selection {
background-color: #5caaff;
}
.select-menu .female .gender-selection {
background-color: #f4588e;
}

以上CSS代碼中，我們創建了一個選擇框和一個選項菜單。在選項菜單中，我們通過添加CSS樣式，創建了兩個“男女”選項，并為它們分別設置了背景顏色。

通過以上CSS代碼，我們為用戶提供了選擇性別的功能，并能夠展示漂亮的UI樣式。