personalizzata selezionare menù a tendina non cliccabile

Question

Sto utilizzando il seguente codice per personalizzare il mio menù a tendina selezionare:

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

Questo funziona bene e sostituisce la freccia del menu a discesa predefinito, ma il problema è che l'immagine della freccia non è selezionabile. Se clicco sulla casella di selezione si apre ma voglio che si apra quando clicco l'immagine della freccia così

Answer 1

aggiungere la seguente regola

pointer-events:none; 

EDIT:

Va rilevato anche se IE non supporta ancora questa proprietà (anche se secondo caniuse - Sarà supportato in IE11)

MA, se si desidera continuare con questo metodo è possibile utilizzare Modernizer o commenti condizionali (Per IE 10) e this css hack (per IE10) per rendere IE ripristinare la freccia incorporata standard.

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

C'è comunque una soluzione alternativa (e anche una soluzione diversa) per questo, che ho citato in my answer here - che contiene anche this FIDDLE