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);
}
}
Blick in CSS-Pointer-Ereignis. –
'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
@ wf4, gilt das nicht als Antwort? – odedta