本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的，而是其同级后面的label元素的。
html主要代码：
<span class="checkbox"> <input type="checkbox"> <label data-on="ON" data-off="OFF"></label> </span>
css主要代码：
.checkbox {
display:inline-block;
position:relative;
text-align:left;
width:60px;
height:30px;
background-color:#222;
overflow:hidden;
-webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.checkbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
margin:0 0;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
z-index:2;
}
.checkbox label {
background-color:#3c3c3c;
background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:inline-block;
width:40px;
text-align:center;
font:bold 11px/28px Arial,Sans-Serif;
color:#999;
text-shadow:0 -1px 0 rgba(0,0,0,0.7);
-webkit-transition:margin-left 0.2s ease-in-out;
-moz-transition:margin-left 0.2s ease-in-out;
-ms-transition:margin-left 0.2s ease-in-out;
-o-transition:margin-left 0.2s ease-in-out;
transition:margin-left 0.2s ease-in-out;
margin:1px;
}
.checkbox label:before {
content:attr(data-off);
}
.checkbox input:checked + label {
margin-left:19px;
background-color:#034B78;
color:white;
}
.checkbox input:checked + label:before {
content:attr(data-on);
}