CSS修改复选框、下拉选项的样式

修改浏览器（特别是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样式，并加入点击事件改变背景图片。

1. .selectBtn {
2. opacity: 0;
3. position: absolute;
4. right: 5px;
5. top: 35%;
6. }

方法二：利用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属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片或者伪元素实现自定义箭头。

<div id="parentDiv">

<select>

<option>a</option>

<option>b</option>

<option>c</option>

</select>

</div>

#parentDiv {

background: url('ico.png') no-repeat right center;

width: 80px;

height: 34px;

overflow: hidden;

}

#parentDiv 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 ; //右侧的小箭头的图片

}

上文是平时一些经验笔记，如有不正确请拍砖指教...

参考链接有些没记下，若有侵权请联系作者删除。