如何使用css创建带有可点击标签的动画复选框

Question

我想使用css

制作带有可点击标签的动画复选框

<input type="checkbox" id="chk1" />
<label for="chk1">check me!</label>

＆＃13;

＆＃13;

[type="checkbox"]:not(:checked) + label:before {
                background: #f8f8f8;
            }
    
            [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
                position: absolute;
            }
    
    
            [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
                position: relative;
                padding-left: 25px;
                cursor: pointer;
                line-height: 1.7 !important;
                font-weight: 400;
            }
    
            label {
                display: inline-block;
                max-width: 100%;
                margin-bottom: 5px;
                font-weight: bold;
            }
    
            [type="checkbox"]:checked + label:before {
                background: red;
                transition: all .5s;
                -webkit-transition: all .5s;
            }
    
            [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 5px;
                width: 17px;
                height: 17px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }
    
            *:before, *:after {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
    
            [type="checkbox"]:checked + label:after {
                content: '✔';
                position: absolute;
                top: 5px;
                left: 2px;
                font-size: 18px;
                line-height: .8;
                color: #fff;
            }

＆＃13;

<input type="checkbox" id="chk1" style="display:none;" />
<label for="chk1">check me!</label>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<input type="checkbox" id="chk1" style="display:none;" />
<label for="chk1">check me!</label>

<style>
    [type="checkbox"]:not(:checked) + label:before {
        background: #f8f8f8;
    }

    [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: absolute;
    }


        [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 25px;
            cursor: pointer;
            line-height: 1.7 !important;
            font-weight: 400;
        }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
    }

    [type="checkbox"]:checked + label:before {
        background: red;
        transition: all .5s;
        -webkit-transition: all .5s;
    }

    [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 17px;
        height: 17px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    [type="checkbox"]:checked + label:after {
        content: '✔';
        position: absolute;
        top: 5px;
        left: 2px;
        font-size: 18px;
        line-height: .8;
        color: #fff;
    }
</style>