html 自定义 checkbox样式

    input[type=checkbox] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #ff6a00;
        background-color: white;
        line-height: 20px;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        font-size: 18px
    }

        input[type=checkbox]::after {
            width: 18px;
            height: 18px;
            line-height: 18px;
            display: block;
            content: "x";
            color: transparent;
            background-color: transparent
        }

        input[type=checkbox]:checked::after {
            content: "√";
            color: #ff6a00;
            background-color: #fff
        }