修改浏览器(特别是IE)中默认的复选框、下拉选项的样式,一点小积累……
修改关键:appearance属性
(1)appearance属性的认识
appearance 属性允许您使元素看上去像标准的用户界面元素。
appearance: normal|icon|window|button|menu|field;
(2)浏览器对于appearance属性的支持
IE浏览器不支持appearance属性(包括ie8~ie11这些较高版本)
Opera Mini也不支持
Firefox部分支持,但使用时必须添加-moz-前缀
Chrome和其他浏览器使用时必须要添加-webkit-前缀
(3)复选框修改
方法一:用label标签关联复选框,把复选框设置为透明(opacity:0;),
然后给label加background样式,并加入点击事件改变背景图片。
.selectBtn {
opacity: 0;
position: absolute;
right: 5px;
top: 35%;
}
方法二:利用appearance
(4)修改下拉列表的样式:
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("arrow.png") no-repeat right center;
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
兼容问题:
IE8/9并不支持 appearance:none CSS属性,所以如果需要兼容低版本IE浏览器,我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片或者伪元素实现自定义箭头。
<p id="parentp">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</p>
#parentp {
background: url('ico.png') no-repeat right center;
width: 80px;
height: 34px;
overflow: hidden;
}
#parentp select {
background: transparent;
border: none;
padding-left: 10px;
width: 100px;
height: 100%;
}
-------------
例如:
.pagination td select{
-webkit-appearance:none;
-moz-appearance:none;
padding-right:5px;
height:30px;
width:65px;
font-size:14px;
text-indent:10px; //文本开头缩进距离
border-color:#dedede;
border-radius:3px;
background-color:inherit;
background:url(../../images/newImg/icon_page_dropdown.png) no-repeat scroll 45px 11px ; //右侧的小箭头的图片
}