通过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; }