自定義選擇下拉箭頭不可點擊

Question

我正在使用以下代碼來自定義我的選擇下拉箭頭：

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;
}

這工作正常並替換默認下拉箭頭，但問題是箭頭圖像不可點擊。 如果我單擊它打開的選擇框，但我也希望它在我單擊箭頭圖像時打開

Answer 1

添加以下規則

pointer-events:none;

編輯：

應該注意的是IE還不支持這個屬性（盡管根據caniuse - 它將在IE11中得到支持）

但是，如果您仍然想要這種方法，您可以使用Modernizer或條件注釋（對於IE <10）和此css hack （對於IE10） 使IE恢復為標准內置箭頭 。

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

然而，有一個解決方法（也是一個不同的解決方案），我在這里的答案中提到 - 其中也包含此Codepen