不同的瀏覽器預設的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      如果不想要邊框，可以這樣設定   */

}

2、去除select預設的下拉圖片 注意：對IE不起作用

#mySelect{

　　border:1px solid red; 

　　appearance: none;

　　-webkit-appearance: none
 
;   /*去除chrome瀏覽器的預設下拉圖片*/

　　-moz-appearance: none;  /*去除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屬性

　　　自己設定進行位置的微調*/ 

}

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;

}

注意：在某些老的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:"";

}