用CSS改变select框的样式

1、首先清除select原有的样式

select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
select::-ms-expand { display: none; }

2、写自己定义的样式

select{
    font-size: 13px;
    border: solid 1px #ccc;
    padding: 8px;
    background: url(arrow.png") no-repeat scroll right center transparent;
    width: 70px;
    height: 35px;
    border-radius: 4px;
}

3、这样就好啦

 

（tips:要想写出好看的下拉框，也可以用div模拟select）