<select> :: before the icon is not clickable

Question

I have a select element with several options, but the displayed icon is not part of the element and therefore not clickable. Any ideas?

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

Answer 1

pointer-events: none; on a pseudo-element will allow you to “click” the pseudo-element as if it were not there.

For more information see http://developer.mozilla.org/en/docs/Web/CSS/pointer-events