CSS多選下拉框是一種非常實用的界面元素，它允許用戶在下拉框中選擇多個選項。這篇文章將介紹如何創(chuàng)建一個CSS多選下拉框。

首先在HTML中創(chuàng)建一個標(biāo)準(zhǔn)的下拉框：

<select name="fruit" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</select>

接下來，在CSS中添加樣式：

select[multiple] {
width: 200px;
height: 100px;
border: 1px solid #ccc;
overflow: auto;
}
select[multiple] option {
padding: 5px;
border-bottom: 1px solid #ccc;
}
select[multiple] option:checked {
background-color: #f8f8f8;
}

這些CSS樣式將創(chuàng)建一個具有滾動條的下拉框，并且選中的選項將顯示為灰色背景。

最后，在JavaScript中添加以下代碼：

var select = document.querySelector('select[multiple]');
var options = select.querySelectorAll('option');
select.addEventListener('change', function() {
var value = '';
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
value += options[i].value + ', ';
}
}
value = value.slice(0, -2);
select.setAttribute('data-value', value);
});

這段JavaScript代碼將捕獲下拉框中的選項，并在下拉框的data-value屬性中存儲這些選項的值。這樣用戶就可以輕松地訪問和提交這些選項的值。

現(xiàn)在，您已經(jīng)了解了如何創(chuàng)建一個CSS多選下拉框，它將成為您網(wǎng)站中的一個非常有用的界面元素。