在前端開發中，下拉選擇框是常見的界面元素，今天我們來看一下如何使用CSS來實現一個簡單的男女選擇下拉框。

<label>
<select>
<option value="男">男</option>
<option value="女">女</option>
</select>
</label>

在這段代碼中，我們使用了HTML的<select>和<option>標簽來創建下拉框，并使用<label>標簽包裹起來，方便用戶點擊標簽來選中相應的選項。接下來，我們使用CSS來美化這個下拉框。

label {
position: relative;
display: block;
width: 100px;
height: 30px;
margin: 10px;
}
select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
label:before {
content: "請選擇";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
}
select:focus + label:before,
select:not(:placeholder-shown) + label:before {
color: #000;
}

在這段代碼中，我們對<label>和<select>標簽分別進行了樣式設置。首先，我們讓<label>標簽的position設置為relative，讓其成為相對定位，接著給寬高、邊距等樣式設置。

接著，我們使用了CSS偽類: before來在選擇框上方添加一個“請選擇”的提示文本，通過設置位置和顏色屬性讓其樣式更美觀。

最后，我們使用select:focus + label:before和select:not(:placeholder-shown) + label:before這兩個CSS選擇器來實現在選擇框選中狀態下和有選項被選中時改變提示文本的顏色。

通過這些簡單的代碼和樣式設置，我們就成功地實現了一個簡單的、美觀的男女選擇下拉框。