样式化 <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;
}

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

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

任何的想法？

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;
}