Question

我使用css ：在属性之后自定义选择框。

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中make it work，您可以在:after区块中使用一行CSS：

pointer-events: none;

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

display:none;

或者如果你的重叠DIV必须在IE中工作，那么就有一个hack detailed here。

伪元素停止事件单击

1 个答案: