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

默认样式.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的话还是要用最初提到的方法。