CSS - Checkbox Styling
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 50px;
cursor: pointer;
font-weight: 300;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 35px;
height: 35px;
border: 2px solid #14B8D5;
background-color: transparent;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
border-radius: 0;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: url(../images/tick.svg);
background-color: #14B8D5;
position: absolute;
width: 35px;
height: 35px;
top: 0em;
left: 0em;
color: #09ad7e;
border: none;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
}
[type="checkbox"]:checked + label:after {
opacity: 1;
}
input[type=checkbox]:focus {
outline: none;
}