無法將復選框直接嵌入到選擇選項選單中,這在面對需要此功能的設計時提出了挑戰。但是,使用 HTML、CSS 和 JavaScript 的組合可以實現類似的效果。
<form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div>
var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }
.multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; }
此解決方案提供了非常接近「選擇選項」選單中類似複選框的功能。但是,請務必注意,它偏離了 Select Option 元素的標準行為。
以上是如何使用 HTML、CSS 和 JavaScript 模擬選擇選項選單內的複選框?的詳細內容。更多資訊請關注PHP中文網其他相關文章!