我设置了以下小提琴,其中包含有关如何使用 CSS3 设置选择框样式的示例。我在 IE9 中遇到问题。和伪元素阻止了它们所在label:before
的label:after
下拉箭头的“单击”动作。这在除 IE9 之外的每个浏览器中都可以正常工作。有谁知道如何调整它来工作?我全是耳朵!
PS我只对css想法感兴趣。我不希望 JavaScript 成为使其正常工作的必要条件。
我设置了以下小提琴,其中包含有关如何使用 CSS3 设置选择框样式的示例。我在 IE9 中遇到问题。和伪元素阻止了它们所在label:before
的label:after
下拉箭头的“单击”动作。这在除 IE9 之外的每个浏览器中都可以正常工作。有谁知道如何调整它来工作?我全是耳朵!
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>