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

Question

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/)

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?

Answer 1

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.)}