CSS 下拉日期選擇框是一種常用的UI組件，可以讓用戶方便地選擇日期。下面是一組示例代碼，可以用來實(shí)現(xiàn)這樣一個(gè)選擇框。

.select-box {
position: relative;
display: inline-block;
}
.select-box select {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 30px 0 10px;
border: none;
background: white;
font-size: 16px;
font-weight: bold;
color: #777777;
cursor: pointer;
}
.select-box::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
background: linear-gradient(to bottom, #ffffff, #e6e6e6);
pointer-events: none;
}
.select-box::after {
content: "\25be";
position: absolute;
top: 50%;
right: 10px;
font-size: 16px;
pointer-events: none;
transform: translateY(-50%);
}

上面的代碼中，.select-box 是一個(gè)容器元素，里面包含一個(gè) select 元素，它允許用戶選擇日期。.select-box::before 和 .select-box::after 是裝飾用的偽元素，分別顯示下拉框的背景和箭頭。

使用這個(gè)樣式的方法是很簡(jiǎn)單的，只需在 HTML 中添加相應(yīng)的結(jié)構(gòu)即可：

<div class="select-box">
<select name="date">
<option value="2022-01-01">2022年1月1日</option>
<option value="2022-01-02">2022年1月2日</option>
<option value="2022-01-03">2022年1月3日</option>
</select>
</div>

這樣就可以創(chuàng)建一個(gè)下拉日期選擇框了。如果需要改變樣式，只需稍微修改一下 CSS，就可以得到不同的效果。比如，可以改變字體顏色、調(diào)整文本對(duì)齊方式等。