两种美化效果如下图：
代码（html）
<div id="main">
<h2 class="top_title">使用CSS3美化复选框checkbox</h2>
<div class="demo">
<div class="wrap">
<p>1. 勾选</p>
<input type="checkbox" id="checkbox_a1" class="chk_1" checked />
<label for="checkbox_a1"></label>
<input type="checkbox" id="checkbox_a2" class="chk_1" />
<label for="checkbox_a2"></label>
</div>
<div class="wrap">
<p>2. 移动端开关</p>
<input type="checkbox" id="checkbox_b1" class="chk_2" checked />
<label for="checkbox_b1"></label>
</div>
</div>
</div>
代码（css）
.demo{width:560px;margin:30px auto 10px auto}
.wrap{margin:30px 0}
.wrap p{padding:10px 0}
.chk_1,.chk_2{display:none;}
.top_title{text-align:center;}
/*css3选择器：E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/
/*******STYLE 1*******/
.chk_1 + label {
background-color:#FFF;
border:1px solid #C1CACA;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding:9px;
border-radius:5px;
display:inline-block;
position:relative;
margin-right:30px;
}
.chk_1 + label:active {
box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.chk_1:checked + label {
background-color:#ECF2F7;
border:1px solid #92A1AC;
color:#243441;
}
.chk_1:checked + label:after {
content:'\2714';
position:absolute;top:-8px;left:0px;
color:#758794;
width:100%;
text-align:center;
font-size:20px;
padding:1px 0 0 0;
vertical-align:text-top;
}
/*******STYLE 2*******/
.chk_2 + label {
width:40px;height:15px;background:#ddd;
padding:9px;
border-radius:20px;
display:inline-block;
position:relative;
}
.chk_2 + label:before {
content:' ';
width:31px;height:31px;background:#fff;
position:absolute;top:1px;left:1px;
z-index:;
border-radius:100px;
box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
transition:all 0.1s ease-in;
-webkit-transition:all 0.1s ease-in;
}
.chk_2 + label:after {
content:' ';
position:absolute;top:;left:;
width:100%;height:100%;
border-radius:50px;
box-shadow:inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
transition:all 0.1s ease-in;
-webkit-transition:all 0.1s ease-in;
}
.chk_2:checked + label:before {
left:26px;
}
.chk_2:checked + label:after {
background:#4cda60;
box-shadow:0 0 1px #4cda60;
}