阅读背景:

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; //为下拉小箭头留出一点位置,避免被文字覆盖<h



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: