css3 checkbox复选框样式的更改

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:

        <div class="mycheck">
            "checkbox" value="1" id="checkbox1" name="">
            for="checkbox1">
        div>
        <div class="mycheck">
            "checkbox" value="1" id="checkbox2" name="">
            for="checkbox2">
        div>
        <div class="mycheck">
            "checkbox" value="1" id="checkbox3" name="">
            for="checkbox3">
        div>
        <div class="mycheck">
            "checkbox" value="1" id="checkbox4" name="">
            for="checkbox4">
        div>