通过css3实现checkbox选择样式

<input type="checkbox" id="checkAll" name="checkAll" />
<label 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; }

 

转载于:https://www.cnblogs.com/rockyan/p/9483470.html