CSS3 IE9通过伪点击
我有一个关于如何使用CSS3对选择框进行样式设置的示例。 我在IE9遇到问题。 label:before和label:after伪元素阻止其位于其上的下拉箭头的“单击”操作之后。 这在除IE9以外的每个浏览器都可以正常工作。 有没有人有任何想法如何调整这个工作？ 我都是耳朵！
http://jsfiddle.net/CXJTv/
PS我只对css的想法感兴趣。 我不想让JavaScript成为正确工作的要求。
使用零不透明度进行第二次选择：
<!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> 如果IE对于当前的实现有问题，您可以使用Modernizer或conditional statements使IE恢复到下拉箭头的标准内容。
这里是一个小提琴，我使用条件语句只解析一个类，如果它是一个不是IE的浏览器。
在这里，我回答了一个问题，它可能会帮助您使用纯CSS选择下拉菜单的自定义样式。
链接地址: http://www.djcxy.com/p/7161.html