input复选框checkbox默认样式纯css修改

转载 https://www.cnblogs.com/cloud-k/p/8572438.html

修改之前的样式 

修改之后的样式

html

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


css样式 

input[type="checkbox"] {

    width: 0.2rem;

    height: 0.2rem;

    display: inline-block;

    text-align: center;

    vertical-align: middle;

    line-height: 0.2rem;

    position: relative;

}

input[type="checkbox"]::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background: #17202A;

    width: 100%;

    height: 100%;

    border: 1px solid #d9d9d9

}

input[type="checkbox"]:checked::before {

    content: "\2713";

    background-color: #17202A;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    border: 1px solid rgb(133, 137, 141);

    color: rgb(255, 255, 255);

    font-size: 0.2rem;

    font-weight: bold;

}

“\2713”实体符号√