<type= "checkbox" ID= "Checkall" name= "Checkall" /><for= '></label >
input[type= ' checkbox ']{ Left:0;Top:0;width:20px;Height:20px;Opacity:0; }label{position:Absolute; Left:30px;Top:0;Height:20px;Line-height:20px; }Label:before{content:"';position:Absolute; Left:-20px;Top:20px;width:25px;Height:25px;Border:1px solid #ddd;Border-radius:50%;transition:All 0.3s Ease;-webkit-transition:All 0.3s Ease;-moz-transition:All 0.3s Ease; }Label:after{content:"';position:Absolute; Left:-12px;Top:22px;width:10px;Height:17px;Border:0;Border-right:3px Solid #fff;Border-bottom:3px Solid #fff;background:#fff;Transform:Rotate (45deg);-webkit-transform:Rotate (45deg);-moz-transform:Rotate (45deg);-ms-transform:Rotate (45deg);transition:All 0.3s Ease;-webkit-transition:All 0.3s Ease;-moz-transition:All 0.3s Ease; }input[type= ' checkbox ']:checked + label:before{background:#4cd764;Border-color:#4cd764; }input[type= ' checkbox ']:checked + label:after{background:#4cd764; }
To implement a CheckBox selection style through CSS3