<select> ::在图标无法点击之前

Question

我有一个带有几个选项的select元素，但渲染的图标不是元素的一部分，因此不可点击。有任何想法吗？ 我的代码 HTML ＆lt; div class =“styled-select icon-drop-down”＆gt;   ＆lt; select class =“select”＆gt;     ＆lt; option value =“low”＆gt;排序方式：低＆lt; / option＆gt;     ＆lt; option value =“high”＆gt;排序方式：高＆lt; /选项＆gt;     ＆lt; option value =“long text”＆gt; long text＆lt; / option＆gt;   ＆LT; /选择＆GT;  ＆LT; / DIV＆GT; CSS .styled-select {    -webkit-appearance：none;    -moz-appearance：none;    外观：无;    宽度：100％;    游标：指针;    溢出：隐藏;    显示：内联;    位置：相对;    border-radius：0;    border：none;    ＆amp; .icon-drop-down :: before {     位置：绝对;     顶部：5px;     右：10px;     颜色：$ dark-grey;         变换：规模（0.7）;    } }

Answer 1

伪元素上的

pointer-events: none;将使您能够点击＆＃34;点击通过＆＃34;伪元素就好像它不存在一样。

有关更多信息，请参阅： http://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Answer 2

我遇到了类似的问题，将pointer-events: none;添加到sudo类样式中，仅在chrome和firefox中修复了该问题，但在IE11中无法正常工作。我将display: block;或display: inline-block;与pointer-events: none;一起使用来解决IE浏览器中的问题。