_x000D_
/* The customcheck */_x000D_
.customcheck {_x000D_
display: block;_x000D_
position: relative;_x000D_
padding-left: 35px;_x000D_
margin-bottom: 12px;_x000D_
cursor: pointer;_x000D_
font-size: 22px;_x000D_
-webkit-user-select: none;_x000D_
-moz-user-select: none;_x000D_
-ms-user-select: none;_x000D_
user-select: none;_x000D_
}_x000D_
_x000D_
/* Hide the browser's default checkbox */_x000D_
.customcheck input {_x000D_
position: absolute;_x000D_
opacity: 0;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
/* Create a custom checkbox */_x000D_
.checkmark {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
height: 25px;_x000D_
width: 25px;_x000D_
background-color: #eee;_x000D_
border-radius: 5px;_x000D_
}_x000D_
_x000D_
/* On mouse-over, add a grey background color */_x000D_
.customcheck:hover input ~ .checkmark {_x000D_
background-color: #ccc;_x000D_
}_x000D_
_x000D_
/* When the checkbox is checked, add a blue background */_x000D_
.customcheck input:checked ~ .checkmark {_x000D_
background-color: #02cf32;_x000D_
border-radius: 5px;_x000D_
}_x000D_
_x000D_
/* Create the checkmark/indicator (hidden when not checked) */_x000D_
.checkmark:after {_x000D_
content: "";_x000D_
position: absolute;_x000D_
display: none;_x000D_
}_x000D_
_x000D_
/* Show the checkmark when checked */_x000D_
.customcheck input:checked ~ .checkmark:after {_x000D_
display: block;_x000D_
}_x000D_
_x000D_
/* Style the checkmark/indicator */_x000D_
.customcheck .checkmark:after {_x000D_
left: 9px;_x000D_
top: 5px;_x000D_
width: 5px;_x000D_
height: 10px;_x000D_
border: solid white;_x000D_
border-width: 0 3px 3px 0;_x000D_
-webkit-transform: rotate(45deg);_x000D_
-ms-transform: rotate(45deg);_x000D_
transform: rotate(45deg);_x000D_
}
_x000D_
<div class="container">_x000D_
<h1>Custom Checkboxes</h1></br>_x000D_
_x000D_
<label class="customcheck">One_x000D_
<input type="checkbox" checked="checked">_x000D_
<span class="checkmark"></span>_x000D_
</label>_x000D_
<label class="customcheck">Two_x000D_
<input type="checkbox">_x000D_
<span class="checkmark"></span>_x000D_
</label>_x000D_
<label class="customcheck">Three_x000D_
<input type="checkbox">_x000D_
<span class="checkmark"></span>_x000D_
</label>_x000D_
<label class="customcheck">Four_x000D_
<input type="checkbox">_x000D_
<span class="checkmark"></span>_x000D_
</label>_x000D_
</div>
_x000D_