修正radio、checkbox和select默许款式

如今前端页面结果日趋雄厚，默许的input组件款式明显已不能满足需求。趁着此次开辟的页面中有这方面的需求，在这里整顿一下修正radio、checkbox、select的要领。

修正radio的默许款式有两种经常运用的要领

纯CSS

此要领需借助CSS3，症结CSS代码以下

.demo1 input[type='radio'],.demo1 input[type="checkbox"]{
display:none;
}
.demo1 label:before{
content: "";
display: inline-block;
width: 17px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 0;
background-color: #3797fc;
}
.demo1 input[type='radio'] + label:before{
border-radius: 8px;
}
.demo1 input[type='checkbox'] + label:before{
border-radius: 3px;
}
.demo1 input[type='radio']:checked+label:before{
content: "\2022";
color: #fff;
font-size: 30px;
text-align: center;
line-height: 19px;
}
.demo1 input[type='checkbox']:checked+label:before{
content: "\2713";
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 17px;
}

• 长处：充足借助了CSS3的上风，无需运用js和图片，仅用纯CSS3便可搞定

• 瑕玷：兼容性较差，仅支撑IE9+

js+图片

• js代码：

$(function(){
$(".demospan").bind("click",function(){
$(this).addClass("on").siblings().removeClass("on");
})
$(".piaochecked").bind("click",function(){
$(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");
// $(this).toggleClass("on_check");
})
})

• css代码

.demospan{
display: inline-block;
width: 24px;
height: 18px;
/*float: left;*/
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.demo21{
opacity: 0;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
.on{
background-position: 0 0;
}
.piaochecked{
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/checkbox_01.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
.on_check{
background-position: 0 -21px;
}
.cbdemo2{
opacity: 0;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
filter:alpha(opacity=0);
}

• 长处：兼容性高，支撑IE6+

• 瑕玷：运用js+图片较为贫苦

/*select*/
.select select{
/*复写Chrome和Firefox内里的边框*/
border:1px solid green;
/*消灭默许款式*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在挑选框的最右边中心显现小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，防止被笔墨掩盖*/
padding-right: 14px;
}
/*消灭ie的默许挑选框款式消灭，隐蔽下拉箭头*/
select::-ms-expand { display: none; }

该要领症结在于消灭默许款式，运用css3的appearance属性，然则兼容性较差，仅支撑IE9+。若要兼容低版本浏览器，能够运用Div举行模仿。

//Todo

• 兼容更低版本浏览器的select款式修正

末了附上演示链接：修正radio、checkbox和select默许款式