css改变下拉列表select框的右边图标的默认样式

默认样式.png
设计图.png

在做某个项目的时候遇到select的设计图与默认样式不同，查了各种方法，有说在select框外加div，此div宽度小于select框以此隐藏默认图标。但是这种方法会出现select框断裂的情况

断裂.png

<code>select {
/关键：将默认的select选择框样式清除/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("../img/arrow.png") no-repeat scroll right center transparent;
/非框架时，为下拉小箭头留出一点位置，避免被文字覆盖/
/padding-right: 10px;/
}</code>
先把默认样式隐藏，在设置select框的背景图为所需的图标向右对齐即可。
因为我引用了bootstrap框架，所以不用设置padding，这个可根据自己的实际情况设置。

注意：IE浏览器不支持上面隐藏默认样式的CSS属性，所以要兼容IE的话还是要用最初提到的方法。