CSS是前端開(kāi)發(fā)中不可缺少的部分，它能夠?yàn)镠TML文檔增加豐富的樣式和交互效果。有時(shí)候我們需要為用戶提供選擇性別的功能，下面介紹如何使用CSS添加男女選項(xiàng)。

/* 創(chuàng)建一個(gè)選擇框，并設(shè)置好樣式 */
.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;
}
/* 在選擇框旁邊添加一個(gè)下拉箭頭 */
.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;
}
/* 創(chuàng)建選項(xiàng)菜單 */
.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);
}
/* 設(shè)置選項(xiàng)菜單中每一項(xiàng)的樣式 */
.select-menu li {
list-style: none;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333;
padding: 0 10px;
cursor: pointer;
background-color: #fff;
}
/* 鼠標(biāo)懸停時(shí)改變選項(xiàng)菜單中每一項(xiàng)的樣式 */
.select-menu li:hover {
background-color: #f4f4f4;
}
/* 當(dāng)選擇框被聚焦或被鼠標(biāo)點(diǎn)擊時(shí)，顯示選項(xiàng)菜單 */
.select-box:focus+.select-menu,
.select-box.active+.select-menu {
display: block;
}
/* 當(dāng)選項(xiàng)菜單中的某一項(xiàng)被選中時(shí)，改變選擇框的顯示內(nèi)容 */
.select-menu li:hover,
.select-menu li.selected {
background-color: #f4f4f4;
}
/* 設(shè)置男女選項(xiàng)的樣式 */
.select-menu .gender-selection {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
border-radius: 50%;
}
/* 設(shè)置男女選項(xiàng)中圖標(biāo)的背景顏色 */
.select-menu .male .gender-selection {
background-color: #5caaff;
}
.select-menu .female .gender-selection {
background-color: #f4588e;
}

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

通過(guò)以上CSS代碼，我們?yōu)橛脩籼峁┝诉x擇性別的功能，并能夠展示漂亮的UI樣式。