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 中创建您想要的内容，因为它不允许使用除 @ 之外的任何内容987654323@,<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>

Fiddle，如果你想要的话。

希望这对你们有用...

Answer 2

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

<select> 标签只能包含：

Zero or more <option>, <optgroup>, and script-supporting elements.

因此，我最终可能会使用如下的 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>