html:
<label><input type="checkbox" /><span>多选框</span></label>
<label><input type="checkbox" class="input_img_true"/><span>多选框</span></label>
<label><input type="checkbox" class="input_fillet_4" /><span>多选框</span></label>
<label><input type="radio" name="r1" checked="checked"/><span>单选框</span></label>
<label><input type="radio" name="r1" /><span>单选框</span></label>
css:
/*清除input本身的样式*/
input{
vertical-align: middle;
outline: none;/*关键代码*/
appearance:none;/*关键代码,css3的样式,必须使用*/
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
}
/*自定义样式,这里只有多选框和单选框,其它类型的只要有清除样式了也可以自定义*/
/*多选框*/
input[type="checkbox"]{
width:15px;
height: 15px;
border: 1px solid #FF0000;
}
input[type="checkbox"]:checked{
border: 5px double #FF0000;
}
input[type="checkbox"].input_img_true:checked{
border: 1px solid #FF0000;
background: url(../img/dagou.png) no-repeat;/*更改url的路径可以改变选中时显示的图片*/
}
/*单选框*/
input[type="radio"]{
width:15px;
height: 15px;
border: 1px solid #FF0000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"]:checked{
border: 5px double #FF0000; /*注意使用的是双边框的*/
}
/*多选框想要使用圆角的添加以下的样式*/
.input_fillet_4{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}