2015-06-11 5 views
5

Ich habe ein select-Element mit ein paar Optionen, aber das Symbol, das gerendert wird, ist nicht Teil des Elements und daher nicht anklickbar. Irgendwelche Ideen?<select> :: vor Icon nicht anklickbar

Mein Code

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); 
    } 
} 
+1

Blick in CSS-Pointer-Ereignis. –

+1

'pointer-events: none;' auf dem Pseudo-Element können Sie das Pseudo-Element "durchklicken", als ob es nicht da wäre. https://developer.mozilla.org/en/docs/Web/CSS/pointer-events – wf4

+0

@ wf4, gilt das nicht als Antwort? – odedta

Antwort