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