通过选中时添加背景图片自定义CheckBox样式
效果：
CSS样式：
<style type="text/css>
label {
10%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
label input[type=checkbox] {
15px;
height: 15px;
overflow: hidden;
background: #fff;
appearance: none;
-webkit-appearance: none;
border: 1px solid #808080;
outline: none;
margin-right: 5px;
margin-top: 0;
}
input[type=checkbox]:checked {
appearance: none;
-webkit-appearance: none;
background-image: url(./Images/btn-blue_03.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
border-radius: 4px;
border: 0;
overflow: hidden;
}
</style>
html结构：
<body> <label> <input type="checkbox" name="type" checked> <span>one</span> </label> <label> <input type="checkbox" name="type"> <span>two</span> </label> </body>