30

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?

Community
  • 1
  • 1
B7th
  • 644
  • 1
  • 6
  • 17

1 Answers1

87

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

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304