如何使用 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中文网其他相关文章！