如何使用 HTML、CSS 和 JavaScript 模擬選擇選項選單中的複選框？

將複選框添加到選擇選項選單

雖然不可能直接在選擇元素中嵌入複選框，但您可以實現使用HTML、CSS 和JavaScript 組合實作類似功能。

HTML程式碼：

建立一個「multiselect」類別的 div 容器，用於儲存選取選單和複選框。

在「multiselect」div 中，建立兩個子 div：

1. selectBox: 此 div 將包含 select 元素和覆蓋點擊時選擇選項。
2. 複選框：此 div 將保留各個複選框，並且最初會隱藏。

CSS 代碼：

將以下樣式套用至elements:

• multiselect🎜>
• multiselect寬度來限制選單的大小。
selectBox:
• 定位選擇元素並相對於 div 的覆寫。
overSelect:
• 使用絕對定位覆蓋選擇選項。
複選框：

最初使用「display: none」隱藏複選框。設定標籤樣式以類似於選擇選項。

JavaScript 程式碼：

向「selectBox」div 新增一個事件偵聽器，以切換「複選框」的可見性" 點擊時的div。並關閉這些複選框。

以上是如何使用 HTML、CSS 和 JavaScript 模擬選擇選項選單中的複選框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！