var defaultState = "checked";
var fakecboxes = document.getElementsByClassName("fakecbox");
for (var i = 0; i < fakecboxes.length; i++) {
(function (i) {
if (!fakecboxes[i].classList.contains(defaultState)) {
fakecboxes[i].classList.add(defaultState);
}
fakecboxes[i].onclick = function () {
if (!this.classList.contains("checked")) {
this.classList.add("checked");
this.classList.remove("unchecked");
} else {
this.classList.remove("checked");
this.classList.add("unchecked");
}
};
})(i);
}
body {
user-select: none;
-webkit-user-select: none;
}
.fakecbox {
width: 12px;
height: 12px;
box-sizing: border-box;
margin: 3px;
margin-left: 4px;
display: inline-block;
position: relative;
box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
background-color: rgb(222, 222, 222);
background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%);
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-top-color: rgb(178, 178, 178);
border-left-color: rgb(167, 167, 167);
border-right-color: rgb(167, 167, 167);
border-bottom-color: rgb(167, 167, 167);
}
.fakecbox:hover {
border-top-color: rgb(168, 168, 168);
border-left-color: rgb(157, 157, 157);
border-right-color: rgb(157, 157, 157);
border-bottom-color: rgb(157, 157, 157);
box-shadow: 0 1px 0 rgba(0, 0, 0, .125);
background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%);
}
.fakecbox:active {
border-top-color: rgb(173, 173, 173);
border-left-color: rgb(161, 161, 161);
border-right-color: rgb(161, 161, 161);
border-bottom-color: rgb(161, 161, 161);
background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%);
box-shadow: none;
}
.fakecbox.checked::after {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
}
.fakecbox.red {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
.fakecbox.redonuncheck.unchecked {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
<input type="checkbox" />Normal checkbox
<br>
<div class="fakecbox"></div>Fake checkbox
<br>
<div class="fakecbox red"></div>Fake red checkbox
<br>
<div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox