自定义radio，checkbook样式

html代码结构：

    

        checkbox1
        checkbox2
        checkbox3
    
    

        radio1
        radio2
        radio3
    

方法一

• 说明：用属性appearance删除的默认样式，并用雪碧图作为背景完成自定义样式。
  兼容性较差，不支持IE浏览器，在FireFox浏览器中无法正常显示，可在Chrome和Edge中正常显示。
• 主要CSS代码：

/*删除控件默认样式*/
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}
/*使用雪碧图添加背景*/
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    background-image: url(img/1.png);
    background-position: 0 16px;
}
input[type="checkbox"]:checked {
    background-position: 16px 16px;
}
input[type="radio"] {
    width: 16px;
    height: 16px;
    background-image: url(img/1.png);
    background-position: 0 0;
}
input[type="radio"]:checked {
    background-position:16px 0;
}

• 完整代码
• 在线演示

方法二

• 说明：先使用display:none;将的默认样式隐藏，再使用伪元素::before插入为checkbox与radio设置样式（此处使用雪碧图做背景）。
  兼容性较好，但不支持IE8及以下。
• 主要css代码：

/*隐藏input默认样式*/
input[type="checkbox"], input[type="radio"] {
    display: none;
}
/*使用雪碧图添加背景*/
/*注意使用伪元素::before*/
.checkboxes label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url(img/1.png);
    background-position: 0 16px;
    vertical-align: bottom;
}
input[type="checkbox"]:checked+label::before {
    background-position: 16px 16px;
}
.radios label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url(img/1.png);
    background-position: 0 0;
    vertical-align: bottom;
}
input[type="radio"]:checked+label::before {
    background-position: 16px 0;
}

• 完整代码
• 在线演示