CSS: after the content below the select element, it becomes necessary not to work

Question

I have a (simplified) css for the select element to get rid of the browser specific view.

.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 at 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> 

Looks good, except for Firefox, showing an arrow (as described by Firefox 30.0 - -moz-appearance: no one works )

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 is not.

Is there any 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 an item because the mouse events are deleted.

Updated example

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

^{(just take browser support for the property )}