复选框样式修改

作者: 撕心裂肺1232 | 来源:发表于2019-07-09 19:16 被阅读0次

css + 字符编码

        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            position: relative;
            margin-right: 12px;
        }
        
        input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border-radius: 2px;
        }
        
        input[type="checkbox"]:checked::before {
            content: "\2713";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            color: #fff;
            font-size: 20px;
            /* font-weight: bold; */
            background: #28a745;
        }

参考链接：https://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html