定製選擇的下拉箭頭，不可點擊

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）和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 FIDDLE