CSS :after content below a select element causes click not to work

I have this (simplified) css for the select element to get rid of the browser-specific appearance

.select{
  display:inline-block;
  position:relative;
}
.select:after{
  position:absolute;
  bottom:0;right:0;
  content:'\2193';
}
select{
  appearance:none; (-moz and -webkit too)
  width:100%;
  height:100%;
}

(Best seen in http://jsfiddle.net/kwpke3xh/)

body{
  background:#eef;
  font-family:sans-serif;
}
.select{
  display:inline-block;
  background-color:#fff;
  border-radius:.5em;
  border:.1rem solid #000;
  color:#013;
  width:8em;
  height:1.5em;
  vertical-align:middle;
  position:relative;
}
.select:after{
  position:absolute;
  bottom:.15em;top:.15em;right:.5rem;
  content:'\2193';
}
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  font:inherit;
  border:none;
  background-color:transparent;
  color:inherit;
  width:100%;
  height:100%;
  padding:0 .5em;
}
<span class="select">
  <select>
    <option>A</option>
    <option>B</option>
  </select>
</span>

It looks good, aside from Firefox still showing the arrow (as described Firefox 30.0 - -moz-appearance: none not working)

The only technical problem is that when I click on the select element, it shows the option elements, but if I click directly on the arrow, it does not.

Is there a way to avoid this?


solution

The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.

Updated Example

.select:after {
  position:absolute;
  bottom:.15em;
  top:.15em;
  right:.5rem;
  content:'\2193';
  pointer-events: none;
}

(Just take browser support for the property into consideration.)