自定义radio，checkbook样式

html代码结构：

<form>
    <fieldset class="checkboxes">
        <label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox">checkbox1</label>
        <label for="checkbox2"><input type="checkbox" id="checkbox2" name="checkbox">checkbox2</label>
        <label for="checkbox3"><input type="checkbox" id="checkbox3" name="checkbox">checkbox3</label>
    </fieldset>
    <fieldset class="radios">
        <label for="radio1"><input type="radio" id="radio1" name="radiobox">radio1</label>
        <label for="radio2"><input type="radio" id="radio2" name="radiobox">radio2</label>
        <label for="radio3"><input type="radio" id="radio3" name="radiobox">radio3</label>
    </fieldset>
</form>

方法一

• 说明：用属性appearance删除<input>的默认样式，并用雪碧图作为背景完成自定义样式。
  兼容性较差，不支持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;将<input>的默认样式隐藏，再使用伪元素::before插入<label>为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;
}

• 完整代码
• 在线演示