建立多選下拉清單可以讓使用者方便地選擇多個選項。儘管您可能想要在下拉欄位前面使用簡單的複選框,但此方法顯示整個清單的複選框,而不是每個選項的複選框。要實現所需的功能,請按照以下步驟操作:
建立下拉清單:
考慮以下HTML 和CSS 程式碼來建立簡單的下拉清單:
<div>
.dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .dropdown-check-list.visible .anchor { color: #0094ff; } .dropdown-check-list.visible .items { display: block; }
JavaScript 可用來控制複選框清單的可見性。
var checkList = document.getElementById('list1'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); };
結果:
此解決方案建立一個下拉清單選單,您可以透過勾選方塊來選擇多個選項。 “anchor”元素充當開啟和關閉複選框清單的按鈕。可以根據需要自訂樣式以符合您網站的設計。
以上是如何使用 HTML 和 CSS 中的複選框建立多選下拉式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!