修改select默認小箭頭

在html中select下拉框默認的小箭頭是這樣的

有時候我們需要把這種小箭頭用更好看的圖片代替，就需要改變樣式了。

html 代碼如下：

<select class="comm-select">
    <option value="社旗縣">全部</option>
    <option value="社旗縣">幸福小區(65)</option>
    <option value="社旗縣">濱河小區(66)</option>
</select>

css樣式如下：

.comm-select{
  width: 178px;
  border: 1px solid #dfdfdf;
  height: 30px;
  line-height: 30px/9;
  padding: 0 5px;
　　/*隱藏默認小箭頭*/
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
/*用圖片替換*/
  background: url("../images/no_select.png") no-repeat scroll right 5px center transparent;
}

修改后的效果如下：