html checkBox自定义格式修改

css代码

 input[type=checkbox]{
            appearance: none;
            -moz-appearance: none;
            -ms-progress-appearance: none;
            -webkit-appearance: none;
            outline: none;
            display: inline-block;
            width: 16px ;
            height: 16px ;
        }

input[type=checkbox]:checked{
            background: url("/images/login/checked@1x.png") no-repeat;     //替换图片
            background-position: center center;                            //图片位置
            background-size: contain;                                      //图片大小
            background-color: #2877ff;
        }

选中前后效果展示

---

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！