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

修改后的效果如下：