我有这个(简化的)CSS的select元素摆脱浏览器特定的外观
.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%;
}
(最好在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>看起来不错,除了Firefox还显示箭头(如Firefox 30.0所述 - -moz-appearance:none not working)
唯一的技术问题是,当我点击select元素时,它会显示选项元素,但是如果我直接点击箭头,它就不会.
有办法避免这种情况吗？