不同的瀏覽器默認的select的選項圖標是不同的，例如：
在chrome中，是這樣的：
未點擊時 
點擊時 
在Firefox中是這樣的：
未點擊時 
點擊時 
在IE9中是這樣的：
未點擊時 
點擊時 
其它瀏覽器大家可以自己嘗試看看select的默認樣式
下面開始正式介紹怎么替換：
這是我的html代碼：
<div>
<select id="mySelect">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
<option value="cq">重慶</option>
</select>
</div>
1、 首先，在css文件中，如果想改變select的默認邊框，可以直接對其進行設置 注意：對IE不起作用
#mySelect{
border:1px solid red; /*將select的邊框設置成紅色*/
/*border:0; 或者border:none 如果不想要邊框，可以這樣設置 */
}
設置完后
在chrome中是這樣的
在Firefox中是這樣的
2、去除select默認的下拉圖片 注意：對IE不起作用
#mySelect{
border:1px solid red;
appearance: none;
-webkit-appearance: none; /*去除chrome瀏覽器的默認下拉圖片*/
-moz-appearance: none; /*去除Firefox瀏覽器的默認下拉圖片*/
}
在chrome和Firefox中都是下面圖片的效果：
3、添加自己的圖片 注意：對IE不起作用
#mySelect{
border:1px solid red;
appearance: none;
-webkit-appearance: none; /*去除chrome瀏覽器的默認下拉圖片*/
-moz-appearance: none; /*去除Firefox瀏覽器的默認下拉圖片*/
background:url('tir.jpg') no-repeat right center;
/*background:url('自己的圖片路徑') no-repeat right center; 將自己的圖片放在select的最右邊的中部，圖片的位置可以通過background-position屬性
自己設置進行位置的微調*/
}
設置后的樣式是這樣的：chrome和Firefox都是一樣的
4、想讓三角圖片過去，給select設置寬度即可
#mySelect{
border:1px solid red;
appearance: none;
-webkit-appearance: none; /*去除chrome瀏覽器的默認下拉圖片*/
-moz-appearance: none; /*去除Firefox瀏覽器的默認下拉圖片*/
background:url('tir.jpg') no-repeat right center;
/*background:url('自己的圖片路徑') no-repeat right center; 將自己的圖片放在select的最右邊的中部，圖片的位置可以通過background-position屬性
自己設置進行位置的微調*/
width：100px;
}
實現效果如下：chrome 和Firefox一樣
注意：在某些老的Firefox版本中，可能設置完這些后，Firefox中的默認小三角還是在，如下圖：
此時，在select選擇器中添加
text-indent:0.01px;
text-overflow:"";
兩個屬性即可
#mySelect{
border:1px solid red;
appearance: none;
-webkit-appearance: none; /*去除chrome瀏覽器的默認下拉圖片*/
-moz-appearance: none; /*去除Firefox瀏覽器的默認下拉圖片*/
background:url('tir.jpg') no-repeat right center;
width：100px;
text-indent:0.01px;
text-overflow:"";
}