先來看看效果圖：
css：
<style media="screen"> .select_demo, .select_list { width: 400px; height: 60px; } .select_demo { background-color: #fbe4e8; } .select_list { border: solid 2px #96cffd; font-size: 30px; padding-left: 20px; /*很關鍵：將默認的select選擇框樣式清除*/ appearance: none; -moz-appearance: none; -webkit-appearance: none; /*在選擇框的最右側中間顯示小箭頭圖片*/ background: url("chevron_down.png") no-repeat scroll right center transparent; background-position-x: 330px; } /*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/ select::-ms-expand { display: none; } </style>
html：
<body> <div class="select_demo"> <select class="select_list"> <option value="0">請選擇</option> <option value="1">香蕉</option> <option value="2">火龍果</option> <option value="3">聖女果</option> <option value="4">南非無籽紅提</option> <option value="5">菲律賓帝皇蕉</option> </select> </div> </body>
右側圖標：
也可以自己在：圖標 上選擇自己喜歡的圖標。