CSS3 IE9点击伪元素？ [英] CSS3 IE9 click through pseudo-element?
本文介绍了CSS3 IE9点击伪元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面的小提琴设置了一个样例如何使用CSS3来设置选择框的样式。我在IE9有问题。 标签：之前和标签：之后伪元素阻止下拉箭头的他们被定位在。这在除IE9之外的每个浏览器中都很好。有没有人有任何想法如何调整这工作？我都耳朵！
I have the following fiddle set up with a sample on how to style a select box with CSS3. I'm having trouble in IE9. The label:before and label:after pseudo-elements are preventing the 'click' action of the drop down arrow that they are positioned over. This works in fine in every single browser except IE9. Does anyone have any idea how to tweak this to work? I'm all ears!
PS我只对css的想法感兴趣。
P.S. I'm only interested in css ideas. I do not want JavaScript to be a requirement to get this to work correctly.
推荐答案
使用零不透明度的第二个选择：
Use a second select with zero opacity:
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>
这篇关于CSS3 IE9点击伪元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
