I have this (simplified) css for the select element to get rid of the browser-specific appearance
我有这个(简化的)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%;
}
(Best seen in http://jsfiddle.net/kwpke3xh/)
(最好在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)
看起来不错,除了Firefox还显示箭头(如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.
唯一的技术问题是,当我单击select元素时,它会显示选项元素,但如果我直接单击箭头,则不会。
Is there a way to avoid this?
有没有办法避免这种情况?
1 个解决方案
#1
36
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.
最简单的CSS解决方案是将指针事件:none添加到伪元素中。这样,您可以单击该元素,因为鼠标事件已被删除。
.select:after {
position:absolute;
bottom:.15em;
top:.15em;
right:.5rem;
content:'\2193';
pointer-events: none;
}
(Just take browser support for the property into consideration.)
(只需考虑浏览器对该属性的支持。)
#1
36
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.
最简单的CSS解决方案是将指针事件:none添加到伪元素中。这样,您可以单击该元素,因为鼠标事件已被删除。
.select:after {
position:absolute;
bottom:.15em;
top:.15em;
right:.5rem;
content:'\2193';
pointer-events: none;
}
(Just take browser support for the property into consideration.)
(只需考虑浏览器对该属性的支持。)