html checkBox custom format modified

css code

 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/[email protected]") no-repeat;     //替换图片
            background-position: center center;                            //图片位置
            background-size: contain;                                      //图片大小
            background-color: #2877ff;
        }

Select the display before and after effect