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

Question

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

以下目前在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>

我读过其他SO帖(1,2,3,4)约在IE伪构件和最似乎指向设定某种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>

小提琴以防万一你想要一个。

希望这对你们有用......