'Set custom image to checkbox without mandatory label

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.

htmlcsscheckbox


Solution 1:[1]

The only way I've found that works everywhere except IE 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" />

Solution 2:[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)

Solution 3:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 kris_IV
Solution 3 Nicolas Heine

Related Questions