默认样式.png
设计图.png
在做某个项目的时候遇到select的设计图与默认样式不同，查了各种方法，有说在select框外加div，此div宽度小于select框以此隐藏默认图标。但是这种方法会出现select框断裂的情况
断裂.png
select {
/*关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("../img/arrow.png") no-repeat scroll right center transparent;
/*非框架时，为下拉小箭头留出一点位置，避免被文字覆盖*/
/*padding-right: 10px;*/
}
先把默认样式隐藏，在设置select框的背景图为所需的图标向右对齐即可。
因为我引用了bootstrap框架，所以不用设置padding，这个可根据自己的实际情况设置。
注意：IE浏览器不支持上面隐藏默认样式的CSS属性，所以要兼容IE的话还是要用最初提到的方法。
