我们知道，原生的radio/checkbox是不可以改变它的样式的。得自己用div/span画，然后监听单击事件。
但没有办法使用原生 radio 的change事件，没有用原生来的方便。这里主要借助 label标签 和 伪类 :checked 来实现不同的切换样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3 自定义 radio/checkbox 的样式</title>
</head>
<style>
input[type=checkbox] {
display: none;
}
/* 默认样式 */
.mycheckbox {
background: red;
display: block;
width: 20px;
height: 20px;
}
/* 选中时的样式：可以选择背景图、字体图标都可以。 */
input[type=checkbox]:checked + .mycheckbox {
background: yellow;
}
</style>
<body class="home">
<!-- 写label是为了能够在单击span的时候，改变checkbox的状态。 -->
<label>
<input type="checkbox">
<span class="mycheckbox"></span>
</label>
</body>
</html>
实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3 自定义 radio/checkbox 的样式</title>
</head>
<style>
input[type=checkbox] {
display: none;
}
/* 默认样式 */
.mycheckbox {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ccc;
position: relative;
}
/* 选中时的样式：可以选择背景图、字体图标都可以。 */
input[type=checkbox]:checked+.mycheckbox {
}
input[type=checkbox]:checked+.mycheckbox::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
content: '';
width: 10px;
height: 10px;
background-color: #ffba00;
border-radius:50%;
border: 1px solid #ccc;
}
</style>
<body class="home">
<!-- 写label是为了能够在单击span的时候，改变checkbox的状态。 -->
<label>
<input type="checkbox">
<span class="mycheckbox"></span>
</label>
</body>
</html>
