Simple check box customization

Customised Check box using HTML5, CSS#

by Sreekesh S K

HTML

<input type="checkbox" class="css-checkbox  lite-green-check" id="checkbox1" >
						<label name="checkbox1_lbl" class="css-label" >Green Check</label>

CSS

.css-checkbox  {
  -webkit-appearance: none;
  border: 1px solid red;
  width: 20px;
  height:20px;
  outline:none;
  cursor: pointer;   
  background:none;
 
}
.lite-green-check {
    background-image: url('http://www.csscheckbox.com/checkboxes/lite-green-check.png');
}
.css-checkbox:checked  {
     background-size: 22px;
  border: 1px solid green;
 background-position: -2px 19px;
}
.css-checkbox:checked + label {color: green}