在optgroup标记上使用:: before css选择器时的浏览器兼容性问题

Question

以下代码仅在Chrome上获得所需结果：

HTML：

<select multiple style="width:500px">
  <optgroup class="outg" label="Swedish Cars">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </optgroup>
</select>

CSS：

.outg::before {
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #656565;
  float: left;
  margin-right: 3px;
  width: 10px;
}

https://jsfiddle.net/2ny35p94/3/

Chrome 58 - 显示三角形和标签：

Firefox 53 - 仅显示三角形：

IE 11 - 仅显示标签：

有关如何使其与浏览器兼容的任何建议吗？

Answer 1

您无法同时显示这两者，因为您正在覆盖默认的::before，这正是浏览器所做的。 Chrome似乎适用它，但它不符合标准规范。所以在这种情况下，Firefox和IE正在按预期工作。

<optgroup>标记由浏览器构造为：

optgroup[label]::before {
     content: attr(label);
}

如果覆盖content属性，则无法执行任何操作。

我的建议是删除代码中的content属性，但您必须修复其他相关问题。请参见屏幕截图：

看到它正常工作：

https://jsfiddle.net/2ny35p94/4/