html - 伪元素停止事件点击

Question

我正在使用 css :after属性自定义选择框。

html:

<div class="styled">
    <select>
        <option>India, Rupees (Rs.)</option>
        <option>USA, Dollars ($) </option>
        <option>United Kingdom, Pounds (&#163;)</option>

    </select>
</div>

CSS：

div.styled{

    display: inline-block;

    float: left;

    position: relative;

    border-right: 1px solid #CCC;

    border-radius: 3px;

    box-shadow: 1px 1px 1px #ddd;

}
.styled select option{

    padding: 5px;

}

div.styled:after{

    content: "";

    background: #fff url("dn_arw.png") no-repeat 2px 4px; 

    display: inline-block;

    float: left;

    height: 18px;

    position: absolute;

    right: 8px;

    top: 6px;

    width: 15px;

}

下面是图片和js小提琴

http://jsfiddle.net/CtYnt/

问题是与“向下箭头图像”重叠的区域不可点击

Answer 1

要使其在 Chrome、Firefox 和 Safari 中运行，您可以在代码块中使用一行 CSS :after：

pointer-events: none;

IE需要更多的工作，最简单的方法是在块上使用IE的条件语句:after并设置：

display:none;

或者，如果您的覆盖 DIV 必须在 IE 中工作，这里有一个 hack详细说明。