本方法只修改下拉框樣式，不修改option樣式，修改後的樣式：
思路：
1.先去掉select本身原有的樣式。
2.用一個元素（div/lebal等）作爲select的父元素。
3.在select父元素後面用：after做一個新的樣式。
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>
<style type="text/css">
/* SELECT W/IMAGE */
select#selectTravelCity
{
width : 14em;
height : 3.2em;
padding : 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border : 1px solid #94c1e7;
-moz-border-radius : 0.2em;
-webkit-border-radius : 0.2em;
border-radius : 0.2em;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
background : #ffffff;
font-family : SimHei;
font-size : 1.1em;
color : RGBA(102,102,102,0.7);
cursor : pointer;
}
/*SELECT W/DOWN-ARROW*/
select#selectPointOfInterest
{
width : 185pt;
height : 40pt;
line-height : 40pt;
padding-right : 20pt;
text-indent : 4pt;
text-align : left;
vertical-align : middle;
border : 1px solid #94c1e7;
-moz-border-radius : 6px;
-webkit-border-radius : 6px;
border-radius : 6px;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
font-family : SimHei;
font-size : 18pt;
font-weight : 500;
color : RGBA(102,102,102,0.7);
cursor : pointer;
outline : none;
}
/*LABEL FOR SELECT*/
label#lblSelect{ position: relative; display: inline-block;}
/*DOWNWARD ARROW (25bc)*/
label#lblSelect::after
{
content : "\25bc";
position : absolute;
top : 0;
right : 0;
bottom : 0;
width : 20pt;
line-height : 40pt;
vertical-align : middle;
text-align : center;
background : #94c1e7;
color : #2984ce;
-moz-border-radius : 0 6px 6px 0;
-webkit-border-radius : 0 6px 6px 0;
border-radius : 0 6px 6px 0;
pointer-events : none;
}
</style>
</head>
<body>
<br />
<select id="selectTravelCity" title="Select Travel Destination">
<option>去掉select原有樣式</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br />
<br />
<label id="lblSelect">
<select id="selectPointOfInterest" title="Select points of interest nearby">
<option>補充新的樣式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>
</html>補充（2017-4-28）
還有一種方法是先去除瀏覽器默認的樣式，然後把一個箭頭的背景圖片定位到右邊，這裏有代碼示例：
http://jsbin.com/gexiwenave/edit?html,css,output，這種方法比較簡單。