div{
//用div的樣式代替select的樣式
width: 200px;
height: 40px;
border-radius: 5px;
//盒子陰影修飾作用,自己隨意
box-shadow: 0 0 5px #ccc;
position: relative;
}
select{
//清除select的邊框樣式
border: none;
//清除select聚焦時候的邊框顏色
outline: none;
//將select的寬高等於div的寬高
width: 100%;
height: 40px;
line-height: 40px;
//隱藏select的下拉圖示
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
//通過padding-left的值讓文字居中
padding-left: 60px;
}
//使用偽類給select新增自己想用的圖示
div:after{
content: "";
width: 14px;
height: 8px;
background: url(img/xiala.png) no-repeat center;
//通過定位將圖示放在合適的位置
position: absolute;
right: 20px;
top: 45%;
//給自定義的圖示實現點選下來功能
pointer-events: none;
}