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>

运行效果：

 未选中

选中后