纯CSS美化input radio和checkbox的样式

声明：此样式，需要下载图片（如下），原理很简单，就是隐藏了原生的样式（ -webkit-appearance:none），用图片替代而已，你也可以根据项目需要选择合适的图片

html：

check代码：<input type="checkbox" class="checkboxClass" >

radio代码：<input type="radio" class="radioClass">

css：

check代码：.checkboxClass{
                                -webkit-appearance:none;
                                outline: none !important;
                                width:20px;height:17.5px;
                                display:inline-block;
                                background:url(/assets/images/checkbox.gif)  no-repeat;
                                background-position:0 0;}

                    .checkboxClass:checked{
                                background-position:0 -21px;}

radio代码：.radioClass {
-webkit-appearance:none;
outline: none !important;
width:20px;height:18px;
display:inline-block;
background: url(/assets/images/radio.gif) no-repeat;
background-position: -24px 0;}
.radioClass:checked{
background-position: 0 0;}

图片： 

      


注：图片路径需要替换下