Checkbox Custom with CSS

by Adi Jaya

HTML

<p>
  <label><input class="demo" type="checkbox"/> Demo 1</label>
</p> 

<p>
	<input class="demo2" type="checkbox" id="demo2">
	<span class="check"></span>
	<label for="demo2">Demo 2</label> 
</p>

CSS

/* demo 1 */
.demo {
    -webkit-appearance: none;
    border: 2px solid red;
    padding: 5px;
}
.demo:checked {
	border-color: blue;
}


/* demo 2 */
.demo2{
	display: none;
}
.check {
	width: 10px;
  	height: 10px;
    display: inline-block;
    border: 2px solid;
}
.demo2:checked ~ .check {
  	border-color: green;
  	background: green;
}