通过选中时添加背景图片自定义CheckBox样式
效果:
CSS样式:
<style type="text/css>
label {
width: 10%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
label input[type=checkbox] {
width: 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>