select下拉箭头改变，兼容ie8/9

各个浏览器下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来模拟下拉菜单

 

posted @ 2018-03-29 09:54  慵懒的小猪  阅读(3721)  评论(0)    收藏  举报