Set custom image to checkbox without mandatory label

Question

I have a project where sometimes checkboxes don't have labels. The only way of setting custom image for checkbox I've found was setting image for label:before for corresponding label which has for value with id of checkbox.

Are there any CSS way (at least hacky) to set custom image to checkbox without changing markup? input[type="checkbox"]:before works only in Chrome.

Answer 1

The only way I've found that works everywhere except IE for Desktop (even in Edge) is via setting CSS appearance :

 input[type="checkbox"] { width: 16px; height: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: red; } input[type="checkbox"]:checked { background-color: green; } 

 <input type="checkbox" /> 

Answer 2

I think it's impossible to do it without label for all browsers. In my opinion label is necessarily.

But you can use JS for this and one of library like icheck (and many other not only jQuery also pure JS)

Answer 3

Maybe if you add a container to your checkbox like this

<div>
    <input type="checkbox">
</div>

and then

div{
    position: relative;
    /* Your custom style */
}

input{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}