<select> ::before icon not clickable

Question

I have a select element with a few options, but the icon that is rendered 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 the pseudo element will enable you to "click through" the pseudo element as if it was not there.

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