各個瀏覽器下select默認的下拉箭頭差別較大，通常會清除默認樣式，重新設計
<html>
<head>
<meta charset="utf-8"></meta>
</head>
<style>
.bar{
width:400px;
height:50px;
}
.labelSelect{
width:80px;
height:50px;
line-height:50px;
display:inline-block;
}
.mySelect{
width:300px;
height:50px;
border:1px solid #ccc;
display:inline-block;
}
/* --ie清除--*/
select::-ms-expand{ display: none; }
select{
border: 1px solid #E9E9E9;
appearance:none;//將默認的select選擇框樣式清除
-moz-appearance:none;
-webkit-appearance:none;
background: url("arrowDown.png") no-repeat scroll right center transparent;//在選擇框的最右側中間顯示小箭頭圖片
padding-right: 20px; //為下拉小箭頭留出一點位置，避免被文字覆蓋
}
</style>
<body>
<div class="bar">
<div class="labelSelect">性別</div>
<select class="mySelect">
<option>男</option>
<option>女</option>
</select>
</div>
</body>
</html>
css下啊使用appearance除去select中的箭頭樣式，而ie下需要用select::-ms-expand{ display: none; }方能去掉，去掉箭頭以后通過設置背景顏色，給select添加統一的箭頭，這樣所有瀏覽器下的select箭頭樣式就保持一致了，效果如圖所示
但是ie8/9下並不適用，這種情況下則需要使用css+圖片+javascript來模擬下拉菜單