<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ background:#ddd; border-radius:20px;/*为元素添加圆角边框*/ cursor:pointer;/*鼠标样式*/ position:relative;/*相对定位*/ transition:all 0.3s ease;/*平滑过渡效果*/ } .cbx:checked ~ label{ /*设置选中的复选框的兄弟元素label的背景色*/ background:#42d842; } .lbl:after{ /*在元素的内容后面插入内容*/ content:''; width:25px; height:25px; display:block; background:#fff; border-radius:25px;/*为元素添加圆角边框*/ box-shadow:0px 3px 3px rgba(0,0,0,0.05);/*为元素设置阴影*/ transition:all 0.3s ease;/*平滑过渡效果*/ position:absolute; /*绝对定位，父容器使用相对定位，子元素使用绝对定位后， 这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角*/ /*调整元素位置*/ left:-2px; top:-3px; } .cbx:checked ~ label:after{ /*改变选中状态的复选框的兄弟元素label的圈圈位置*/ left:25px; background:#fff; } .lbl:active:after{ /*设置点击时候圈圈进行缩放动画*/ transform:scale(2,0.8); } .hidden{ /*隐藏复选框*/ display:none; } .cbx:disabled ~ label{ /*设置复选框禁用時候的兄弟元素label樣式*/ background:#d5d5d5; pointer-events:none;/*阻止点击动作产生效果*/ } .cbx:disabled ~ label:after{ /*设置复选框禁用時候的兄弟元素label圈圈樣式*/ background:#bcbdbc; } .check{ /*设置元素的下边距*/ margin-bottom:20px; } .content{ width:100px; margin:100px auto;/*设置居中*/ } </style> </head> <body> <div class="content"> <div class="check"> <input type="checkbox" id="uncheckbox" class="cbx hidden" name="1" /> <label for="uncheckbox" class="lbl"></label> <!--for 属性规定 label 与哪个表单元素绑定。--> </div> <!--再来一个禁用的复选框--> <div class="check"> <input type="checkbox" id="discheckbox" class="cbx hidden" name="sb" disabled/> <label for="discheckbox" class="lbl"></label> </div> <!--再来一个选中状态的复选框--> <div class="check"> <input type="checkbox" id="checkbox" class="cbx hidden" name="1" checked/> <label for="checkbox" class="lbl"></label> </div> </div> </body> </html>
chrome浏览器效果图！ 主流浏览器一切正常。除了ie8 以下不兼容。 万恶的IE之源 赶紧从中国消失吧。