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
(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?
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.
(Just take browser support for the property into consideration.)