以下代码获取仅在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/
铬58 - 两个三角形和标签被显示:
火狐53 - 只显示三角形:
IE 11 - 只显示标签:
任何suggesti关于如何使它跨浏览器兼容?
'optgroup'支持狡猾之前,你甚至开始在它扔CSS。如果你想浏览器的支持,限制自己的'option'元素和背景图像/ ASCII艺术/不间断空格/'disabled'实现的东西,将行为和外观相似;或者选择使用JavaScript的自定义解决方案来提供所需的功能和格式化功能。 – CBroe
我不仅::之前使用稳定的解决这个... –