在Web開(kāi)發(fā)中，我們經(jīng)常需要使用下拉框作為表單元素，但是如果需要在下拉框中選擇多個(gè)選項(xiàng)怎么辦呢？這時(shí)候我們可以使用
CSS多選下拉框來(lái)解決這個(gè)問(wèn)題。
<div class="select-style"> <select multiple> <option>選項(xiàng)1</option> <option>選項(xiàng)2</option> <option>選項(xiàng)3</option> <option>選項(xiàng)4</option> </select> </div>
上面的代碼中，我們使用了<div class="select-style">來(lái)定義多選下拉框的樣式，同時(shí)也用了<select multiple>來(lái)定義下拉框可以選擇多個(gè)選項(xiàng)。
下面我們來(lái)看一下如何實(shí)現(xiàn)<div class="select-style">的樣式：
.select-style {
width: 220px;
height: 36px;
margin: 0 auto;
position: relative;
border: 1px solid #ced4da;
border-radius: 3px;
overflow: hidden;
background: url('../images/select-arrow.svg') no-repeat right center;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select {
position: absolute;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 8px 12px;
border: none;
background: none;
}
.select-style select:focus {
outline: none;
}代碼中，我們首先定義了外層<div>元素的寬度、高度、邊框、邊框-radius、溢出影藏等樣式，然后使用了背景圖片來(lái)實(shí)現(xiàn)下拉框的箭頭，同時(shí)還可以自定義背景顏色。接著，我們定義了下拉框的樣式，使用了絕對(duì)定位來(lái)使其覆蓋在<div>元素上，并且定義了字體大小、字體粗細(xì)、padding等樣式。最后，我們使用:focus來(lái)實(shí)現(xiàn)在用戶(hù)點(diǎn)擊多選下拉框時(shí)，其樣式有所變化。
是不是很簡(jiǎn)單？現(xiàn)在我們就可以愉快地使用<div> CSS多選下拉框來(lái)滿(mǎn)足我們的需求啦！