Styling a <select multiple />

Question

I have modified in a general way all the select of a stylesheet, doing the next:

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

This allows me to put an image where at the right of a <select /> and looks cool, our designer love it (it only works on Chrome by the way).

My problem is that now I'm trying to style a <select multiple /> and I can't reset the appearance atribute to a default one that shows the scroll bar.

Any idea?

Solution

Use the attribute selector from the default stylesheet as a guide to reset the style:

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