复选框特效

代码:
--------------------
<div class='checkboxs'>
    <input type="checkbox" id="check1" class="check1"   />";
    <label for="check1" date-off="Off" date-on="On" class="check_label"></label>";
</divs>
css:
---------------
.checkboxs input:checked + label {
  background-color: #3CF;
  color:#000;    
}
.checkboxs input:checked + label:before { /*checkbox选中右边的*/
   content:attr(date-on);
   margin-left:0em;
}
.checkboxs input:checked + label:after {/*checkbox选中左边的白色框框*/
   margin-left:2.5em;
   transition: margin-left .3s;
}
.check1{
    display:none;    
}
.check_label{
    background:#000;
    width:5em;
    height:2.5em;    
    display:block;
}
.check_label:before{ /*checkbox右边的字*/
    content:attr(date-off);
    width:3em;
    display:inline-block;
    color:#FFF;
    line-height:2.5em;
    margin-left:2em;
    text-align:center;
    font-weight:bold;    
}
.check_label:after{  /*checkbox没选中左边的白色框框*/
    content:"";
    width:2em;
    height:2em;
    background-color:#fff;
    display:inline-block;
    margin-left:.3em;
    margin-top:-2.25em;
    transition: margin-left .3s;
    box-shadow:inset 0 0 5px #666;
}