我想使用IE 11通过CSS将复选框添加到Multi Select。 我使用的css在Edge等环境中有效,但不适用于IE 11。
CSS和代码:
<style>
option:before
{
content: "☐ "
}
option:checked:before
{
content: "☑ "
}
<select class="ddlRole" id="ddlRole" style="width: 810px;" size="6" multiple="">
<option value="1">Administrator</option>
<option selected="selected" value="2">Manager</option>
<option value="3">User</option>
<option selected="selected" value="4">Sub Manager</option>
<option value="8">new role test 5</option>
</select>
或者,我将使用一个包含两列的表,第一列为复选框列,第二列为选项的文本/名称。可能甚至和Li一起扩大了Ul,但我真的不愿意。
谢谢
答案 0 :(得分:0)
如果您尝试使用HTML,CSS和JS,则以下示例可以在包括IE在内的所有主要浏览器上使用。
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>
IE 11中的输出:
参考:
How to use Checkbox inside Select Option
如果您只想使用CSS解决方案,那么您也可以在上面的链接中找到它。