CSS 提供了許多常用的表單控件,下拉選擇框是其中之一。事實上,下拉選擇框也可以添加多選功能,讓用戶能夠選擇多個選項。
<select name="fruit" multiple> <option value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> <option value="watermelon">西瓜</option> </select>
上面代碼中,使用了 multiple 屬性來實現下拉選擇框的多選功能。當用戶需要選擇多個選項時,只需按住 Ctrl(Windows)或 Command(Mac)鍵,然后點擊相應的選項即可。
如果想讓下拉選擇框默認選中某些選項,則在對應的<option>元素上添加 selected 屬性即可,如下所示:
<select name="fruit" multiple> <option value="apple" selected>蘋果</option> <option value="banana">香蕉</option> <option value="orange" selected>橙子</option> <option value="watermelon">西瓜</option> </select>
下拉選擇框的樣式可以像普通的文本框和按鈕一樣修改,例如設置寬度、背景顏色和邊框等。下面是一個簡單的樣式例子:
select { width: 200px; padding: 6px 10px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; color: #333; line-height: 1.5; }
總之,多選下拉選擇框可以為用戶提供更便捷的選擇方式,同時通過修改樣式也可以讓下拉選擇框更加美觀和與網站風格相一致。