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

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?

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