css3美化复选框checkbox

 两种美化效果如下图：

代码（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;
 }