在 IE11 上无法查看 ::before 中的伪元素内容

Question

我正在尝试在每个 select 的选项标签旁边添加一个复选框（以伪元素的形式）。这在 Chrome、Firefox 等最新浏览器上运行良好，但在 IE11 上运行不佳。

IE11 简单地划掉了所有伪元素的属性，我在其他答案中读到它是 IE11 上的调试器错误，应该呈现我的内容

.multiSelectCheckbox {
  overflow: auto;
  width: 100px;
}

.multiSelectCheckbox option::before {
  content: "10";
  width: 20px;
  text-align: center;
  display: inline-block;
}

.multiSelectCheckbox option:checked::before {
  content: "11";
  width: 20px;
  text-align: center;
  display: inline-block;
}

Select one:
<select class="multiSelectCheckbox" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

我不确定接下来可以做什么，如有任何意见，我们将不胜感激。我还附加了一个 link 到 JSFiddle（这个 IE11 也不支持）here.

Answer 1

它在 IE 中不起作用，因为 IE 不允许 <select> 框中除 <option> 标记以外的任何内容。更多信息可以参考this answer.

如果要个性化 select 框，可以使用 <select> 和 <label>。您可以参考下面的多个select示例代码，在IE和其他浏览器中运行良好：

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
  display: none;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: block;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<form>
  <div class="multiselect">
    <div class="selectBox">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
                    <input type="checkbox" id="one" />1
                </label>
      <label for="two">
                    <input type="checkbox" id="two" />2
                </label>
      <label for="three">
                    <input type="checkbox" id="three" />3
                </label>
    </div>
  </div>
</form>

在 IE11 上无法查看 ::before 中的伪元素内容

Unable to view pseudo element content in ::before on IE11

html

css

pseudo-element

internet-explorer-11