客户给了我一个设计，其中有一个选择选项菜单，其中包含一个复选框以及作为列表中单独项目的项目名称。
是否可以在“选择选项”菜单中添加一个复选框？
注意：开发人员需要添加自己的 id 才能使菜单生效，如果可能的话，我只需要 HTML CSS 代码。
您不能将复选框放置在 select 元素内，但您可以通过使用 HTML、CSS 和 JavaScript 获得相同的功能。这是一个可能的工作解决方案。解释如下。
Code:
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;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
解释：
首先，我们创建一个显示文本“选择一个选项”的选择元素，以及覆盖（重叠）选择元素的空元素（<div class="overSelect">）。我们不希望用户单击选择元素 - 它会显示空选项。为了使该元素与其他元素重叠，我们使用 CSS 位置属性，其值为relative |绝对。
为了添加功能，我们指定一个 JavaScript 函数，当用户单击包含我们的选择元素的 div 时调用该函数（<div class="selectBox" onclick="showCheckboxes()">).
我们还创建包含复选框的 div 并使用 CSS 对其进行样式设置。上面提到的 JavaScript 函数只是改变了<div id="checkboxes">CSS 显示属性的值从“none”到“block”，反之亦然。
该解决方案在以下浏览器中进行了测试：Internet Explorer 10、Firefox 34、Chrome 39。浏览器需要启用 JavaScript。
更多信息：
CSS定位
如何将一个div覆盖在另一个div上 https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
http://www.w3schools.com/css/css_positioning.asp http://www.w3schools.com/css/css_positioning.asp
CSS 显示属性
http://www.w3schools.com/cssref/pr_class_display.asp http://www.w3schools.com/cssref/pr_class_display.asp
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
