<select> :: before icon not clickable

Question

Ho un elemento select con alcune opzioni, ma l'icona che viene renderizzata non fa parte dell'elemento e quindi non è selezionabile. Qualche idea?

Il mio codice

html

<div class="styled-select icon-drop-down"> 
    <select class="select"> 
    <option value="low">Sort by: Low</option> 
    <option value="high">Sort by: High</option> 
    <option value="long text">long text</option> 
    </select> 
</div> 

css

.styled-select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance:   none; 
    width: 100%; 
    cursor: pointer; 
    overflow: hidden; 
    display: inline; 
    position: relative; 
    border-radius: 0; 
    border: none; 

    &.icon-drop-down::before { 
    position: absolute; 
    top: 5px; 
    right: 10px; 
    color: $dark-grey; 
     transform: scale(0.7); 
    } 
} 

Answer 1

pointer-events: none; sullo pseudo elemento ti consentirà di "cliccare attraverso" lo pseudo elemento come se non fosse lì.

Per ulteriori informazioni si veda: http://developer.mozilla.org/en/docs/Web/CSS/pointer-events