CSS:在select元素下面的内容导致点击不起作用之后

Question

我为select元素提供了这个（简化的）css，以摆脱浏览器特定的外观

.select{
    display:inline-block;
    position:relative;
}
.select:after{
    position:absolute;
    bottom:0;right:0;
    content:'2193'; 
}
select{
    appearance:none; (-moz and -webkit too)
    width:100%;
    height:100%;
}

（最常见于http://jsfiddle.net/kwpke3xh/)

body{
    background:#eef;
    font-family:sans-serif;
}
.select{
    display:inline-block;
    background-color:#fff;
    border-radius:.5em;
    border:.1rem solid #000;
    color:#013;
    width:8em;
    height:1.5em;
    vertical-align:middle;
    position:relative;
}
.select:after{
	position:absolute;
	bottom:.15em;top:.15em;right:.5rem;
	content:'2193'; 
}
select{
    -webkit-appearance:none;
   -moz-appearance:none;
   	appearance:none;
    font:inherit;
    border:none;
    background-color:transparent;
    color:inherit;
    width:100%;
    height:100%;
    padding:0 .5em;
}

<span class="select">
    <select>
        <option>A</option>
        <option>B</option>
    </select>
</span>

它看起来不错，除了Firefox仍然显示箭头（正如所描述的Firefox 30.0-moz外观：没有不工作）

唯一的技术问题是，当我点击select元素时，它会显示选项元素，但如果我直接点击箭头，它不会。

有办法避免这种情况吗？

Answer 1

最简单的CSS解决方案是将pointer-events: none添加到伪元素中。在执行此操作时，您可以单击元素，因为鼠标事件已被删除。

更新示例

.select:after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'2193';
    pointer-events: none;
}

^{（只需考虑对属性的浏览器支持即可。）}