html input自定义样式（多选框，单选框）

  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;
}

转载于:https://my.oschina.net/mingriyi/blog/1975354