自定义选择下拉箭头不可点击

时间:2013-07-23 13:43:27

标签: html css css3

我正在使用以下代码来自定义我的选择下拉箭头:

HTML

<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>

CSS

span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white;
    border:1px solid #dddddd;
    border-left:0px;
}

这样可以正常工作并替换默认的下拉箭头,但问题是箭头图像不可点击。如果我点击它打开的选择框,但是当我点击箭头图像时我想要它打开

1 个答案:

答案 0 :(得分:33)

添加以下规则

pointer-events:none;

修改

应该注意的是IE虽然还不支持这个属性(虽然根据caniuse - 它将在IE11中得到支持)

但是,如果您仍然想要这种方法,您可以使用Modernizer或条件注释(对于IE&lt; 10)和this css hack(对于IE10)使IE恢复为标准内置箭头< /强>

/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    span.selectWrapper:after
    {
        display:none;
    }
}

然而,我在my answer here中提到了一个解决方法(也是一个不同的解决方案) - 其中还包含this Codepen