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 />的样式，我无法将外观属性重置为显示滚动条的默认属性。

有什么想法吗？

Answer 1

使用default stylesheet中的属性选择器作为重置样式的指南：

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

设置<select multiple =“”> </select>的样式

1 个答案: