input checkbox 修改默认样式

 <input type="checkbox" name="btn" id="btn1"><label for="btn1"></label>

        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            position: relative;
        }

        input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;/* 未选中时的背景颜色 */
            width: 100%;
            height: 100%;
            border: 1px solid #d9d9d9;  /* 未选中时的边框颜色 */
           
        }

        input[type="checkbox"]:checked::before {
            content: "\2713";  /* 对号的转义符 √ */
            background-color: #fff;/* 选中时的背景颜色 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border: 1px solid #ccc; /* 选中后的边框颜色 */
            color: #000;  /* 选中后的文字颜色   */
            font-size: 20px;
            font-weight: bold;
        }