css3 checkbox复选框样式的更改_css checkbox 显示数字-CSDN博客

本文链接：https://blog.csdn.net/qq_37103514/article/details/80290736

css:

<style>
            .mycheck {
                width:25px;
                margin:20px 100px;
                position:relative;
            }
            .mycheck input[type=checkbox] {
                visibility:hidden;
            }
            .mycheck label {
                cursor:pointer;
                position:absolute;
                width:25px;
                height:25px;
                top:0;
                left:0;
                background:#fff;
                border:2px solid #ccc;
                -moz-border-radius:50%;
                -webkit-border-radius:50%;
                border-radius:50%;
            }
            .mycheck label:after {
                opacity:0;
                content:'';
                position:absolute;
                width:9px;
                height:5px;
                background:transparent;
                top:6px;
                left:6px;
                border:4px solid #fff;
                border-top:none;
                border-right:none;
                -webkit-transform:rotate(-45deg);
                -moz-transform:rotate(-45deg);
                -o-transform:rotate(-45deg);
                -ms-transform:rotate(-45deg);
                transform:rotate(-45deg);
            }
            .mycheck input[type=checkbox]:checked + label {
                background:#f40;
                border:2px solid #f40;
            }
            .mycheck input[type=checkbox]:checked + label:after {
                opacity:1;
                background:#f40;
            }


        </style>

html:

<body>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox1" name="">
            <label for="checkbox1"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox2" name="">
            <label for="checkbox2"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox3" name="">
            <label for="checkbox3"></label>
        </div>
        <div class="mycheck">
            <input type="checkbox" value="1" id="checkbox4" name="">
            <label for="checkbox4"></label>
        </div>

    </body>