I recently found a creative way to design custom styled checkboxes using pure CSS. The only downside is that you have to click on the box (actually, the label) itself to check it. If you're familiar with placing the input inside the label, then you know that allows for clicking on the text or the box to check it. However, this method doesn't allow for styling the checkbox itself due to limitations in CSS. To overcome this, I attempted to use JavaScript to trigger hover and click states. Despite applying the classes, the CSS isn't being rendered as expected, leaving me puzzled. I'm still working on implementing the click events, but first, I want to achieve the desired hover effect by hovering over the box.
http://codepen.io/sinrise/pen/gPZmRm
HTML
<div class="container">
<ul class="subcategories">
<li id="subcat-test">
<div class="tmi-checkbox">
<input type="checkbox" id="subcat-check-test" value="none" />
<label for="subcat-check-test"></label><span>Subcategory</span>
</div>
</li>
</ul>
</div>
CSS (SCSS)
.container { padding: 50px; }
ul.subcategories {
list-style: none;
padding: 0;
li {
&:hover { cursor: pointer; }
position: relative;
.tmi-checkbox {
position: relative;
display: block;
margin: 0 0 15px 0;
input[type="checkbox"] {
visibility: hidden;
&:checked + label:after {
opacity: 1;
border-color: #fff;
}
&:checked + label {
background: orange;
border-color: orange;
}
}
label {
position: absolute;
top: 0;
width: 18px;
height: 18px;
border-radius: 3px;
border: 1px solid #ccc;
&:hover { cursor: pointer; }
&:after {
opacity: 0;
content: '';
position: absolute;
width: 11px;
height: 7px;
background: transparent;
top: 3px;
left: 3px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&:hover::after {
opacity: 0.3;
cursor: pointer;
}
}
span {
display: block;
position: absolute;
margin-left: 30px;
top: 0;
max-width: 230px;
color: #4a4a4a;
left: 10px;
}
}
}
}
JS
$(".subcategories li").hover(function() {
$(this).find("label").addClass("tmi-checkbox-label-hover");
$(this).find("input").addClass("tmi-checkbox-hover");
}, function() {
$(this).find("label").removeClass("tmi-checkbox-label-hover");
$(this).find("input").removeClass("tmi-checkbox-hover");
});