使用CSS样式美化<select multiple />元素

Question

我已经以一种普遍的方式修改了样式表中的所有选择器，具体做法如下：

select {
    -moz-appearance:none;
    -moz-border-radius:1px;
    -moz-box-sizing:border-box;
    -webkit-appearance:none;
    -webkit-border-radius:1px;
    appearance:none;
    background:url(../images/general/select-arrow.png) no-repeat scroll 100% 50% #fff;
    border:1px solid #d2d2d2;
    border-radius:1px;
    font:13px "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-size:13px;
    height:36px;
    resize:none;
    vertical-align:baseline;
    width:260px;
    padding:9px 7px 9px 17px;
}

这使我可以将图像放在<select />右侧，看起来很酷，我们的设计师喜欢它（顺便说一下，它只在Chrome上有效）。

我的问题是现在我正在尝试为<select multiple />设置样式，但我无法将外观属性重置为默认值，以显示滚动条。

有什么想法吗？

- udexter

Answer 1

使用默认样式表中的属性选择器作为指南重置样式：

select[multiple] {
  background:none;
  width:auto;
  height:auto;
  padding:0;
  margin:0;
  border-width: 2px;
  border-style: inset;
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  appearance: menulist;
}

- Paul Sweatte