checkbox复选框⾃定义背景颜⾊和选中样式效果图如下：
/* css 复选框 */
input[type=checkbox] {
cursor: pointer;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
background-color: #fff;
color: #fff;
width: 14px;
height: 14px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 2px;
box-sizing: border-box;
border: 1px solid #ddd;
}
input[type=checkbox]:checked::after {
content: "";
background-color: #037DF3;
border-color: #037DF3;
background-color: #037DF3;
}
input[type=checkbox]:checked::before {
content: '';
position: absolute;
top: 1px;
left: 5px;
width: 3px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
z-index: 1;borderbox
}
<!-- html -->
<input type="checkbox">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。