Internet Explorer 中选择标记选项中的 CSS 伪元素

Question

我正在尝试将一些 CSS::before内容添加到<select multiple>的<option>标签中，具体取决于是否选择了该选项。

以下内容目前在Chrome和FF中运行良好，但是我在IE11中遇到了问题。

select > option::before {
display: inline-block;
width: 10em;
}
select > option:checked::before {
content: "SELECTED: ";
}
select > option:not(:checked)::before {
content: "excluded: " ;
}

<select multiple>
<option value="1" selected="selected">1</option>
<option value="2" selected="selected">2</option>
<option value="3" selected="selected">3</option>
<option value="4" selected="selected">4</option>
<option value="5" selected="selected">5</option>
</select>

我已经阅读了其他关于IE伪元素的SO帖子(1,2,3,4)，大多数似乎都指向设置某种position或display属性，我已经尝试过。

发生这种情况是因为<option>标签不应包含子元素吗？

Answer 1

首先让我们直截了当地说 一件事，我们无法在IE中创建您想要的内容，因为它不允许除<option>，<optgroup>标签之外的任何内容 一个<select>盒。

在我看来，这是我可以使用CSS唯一方法获得的解决方法。如果您更喜欢脚本，则有很多替代方案，即使 select2 是此类自定义最常用的插件之一。

我已使用 [type="checkbox"] 来获得此结果

jQuery仅用于显示值。

var multyVal = [];
$('.multiple input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
var Tval = $(this).val();
multyVal.push(Tval);
}
});
console.log($('select').val(), multyVal);

select>option::before {
display: inline-block;
width: 10em;
}
select>option:checked::before {
content: "SELECTED: ";
}
select>option:not(:checked)::before {
content: "excluded: ";
}
.multiple {
height: 60px;
display: inline-block;
overflow-y: scroll;
background: #d4d4d4;
width: 10em;
border: 1px solid #999;
margin-left: 10px;
}
.multiple [type="checkbox"] {
display: none;
}
.multiple label {
width: 100%;
float: left;
font-size: 13px;
text-align: right;
background: #fff;
}
.multiple label::before {
display: inline-block;
float: left;
font-family: arial, san-sarif;
font-size: 11px;
}
.multiple [type="checkbox"]:checked+label::before {
content: "SELECTED: ";
}
.multiple [type="checkbox"]:checked+label {
background: #666;
color: #fff;
}
.multiple [type="checkbox"]:not(:checked)+label::before {
content: "excluded: ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="1" selected="selected">1</option>
<option value="2" selected="selected">2</option>
<option value="3" selected="selected">3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
<div class="multiple">
<input type="checkbox" name="multiple" value="1" id="rad1" checked="checked">
<label for="rad1">1</label>
<input type="checkbox" name="multiple" value="2" id="rad2" checked="checked">
<label for="rad2">2</label>
<input type="checkbox" name="multiple" value="3" id="rad3" checked="checked">
<label for="rad3">3</label>
<input type="checkbox" name="multiple" value="4" id="rad4">
<label for="rad4">4</label>
<input type="checkbox" name="multiple" value="5" id="rad5">
<label for="rad5">5</label>
</div>

摆弄一下，以防你想要一个。

希望这对你们来说会派上用场...

Answer 2

理想情况下，我正在寻找一个纯粹的CSS解决方案，但根据评论和@weBer

<select>标记只能包含：

零个或多个<option>、<optgroup>和脚本支持元素。

因此，我最终可能会使用如下所示的JavaScript解决方案。

document.getElementById("multiSelect").onchange = function() {
var opts = this.getElementsByTagName("option");
for (var i = 0; i < opts.length; i++) {
if (opts[i].selected === true) {
opts[i].innerHTML = "SELECTED: " + opts[i].value;
} else {
opts[i].innerHTML = "excluded: " + opts[i].value;
}
}
};

select {
height: 10em;
width: 10em;
overflow-y: hidden;
}

<select id="multiSelect" multiple>
<option value="1">excluded: 1</option>
<option value="2">excluded: 2</option>
<option value="3">excluded: 3</option>
<option value="4">excluded: 4</option>
<option value="5">excluded: 5</option>
</select>