修改 input checkbox(复选框) 默认的背景颜色

在项目中 遇到修改 复选框背景颜色 的需求

先上效果图:

附上代码：

通过 after 伪类选择器 实现

input[type=checkbox]{
     cursor: pointer;
     position: relative;
     width: 15px;
     height: 15px;
     font-size: 14px;
}

input[type=checkbox]::after{
     position: absolute;
     top: 0;
     background-color: red;
     color: #000;
     width: 15px;
     height: 15px;
     display: inline-block;
     visibility: visible;
     padding-left: 0px;
     text-align: center;
     content: ' ';
     border-radius: 3px
}
        
input[type=checkbox]:checked::after{
     content: "✓";
     font-size: 12px;
     font-weight: bold;
}