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

在選擇選項中合併複選框

無法將復選框直接嵌入到選擇選項選單中，這在面對需要此功能的設計時提出了挑戰。但是，使用 HTML、CSS 和 JavaScript 的組合可以實現類似的效果。

實作

1. HTML 結構： 使用下列內容建立 div “多重選擇”類別。在此 div 中，包含一個 select 元素和一個帶有「overSelect」類別的 div，絕對定位以覆寫該 select 元素。此外，建立另一個 ID 為「checkboxes」的 div，其中將包含複選框選項。
2. CSS 樣式： 將選取元素設為粗體文字並將視覺樣式套用至「overSelect」 div 來模仿選取選項的外觀。定義「複選框」div 的樣式以控制其可見性和佈局。
3. JavaScript 功能： 使用 JavaScript 在點擊事件上切換「複選框」div 的可見性。

程式碼

<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中文網其他相關文章！