CSS实现修改CheckBox样式

checkbox的代码：

 <div><input type="checkbox" id="custom-checkbox" class="custom-checkbox"><label for="custom-checkbox"></label></div>

CSS代码：

 <style type="text/css">.custom-checkbox {opacity: 0; /* 完全透明 */position: absolute; /* 移出可视区域 */pointer-events: none; /* 使其不响应用户操作 */}.custom-checkbox + label {position: relative; /* 相对于这个元素定位 */padding-left: 25px; /* 留出空间给自定义复选框 */cursor: pointer; /* 鼠标悬停时显示手形图标 */}.custom-checkbox + label:before {content: ''; /* 必须有内容才能使伪元素显示 */display: block; /* 将伪元素作为块级元素处理 */width: 16px; /* 宽度 */height: 16px; /* 高度 */background: white; /* 背景色 */border: 1px solid #ccc; /* 边框 */position: absolute; /* 绝对定位 */left: 0; /* 相对于父元素的左侧对齐 */top: 0; /* 相对于父元素的顶部对齐 */border-radius: 3px; /* 圆角 */}.custom-checkbox:checked + label:before {background: #007bff; /* 选中时的背景色 */border-color: #007bff; /* 选中时的边框色 */}.custom-checkbox:checked + label:after {display: block; /* 在复选框选中时显示对勾 */}</style>

运行效果：

 未选中

选中后