How to display image in place of checkbox?

Someone stumbling over this while googling? Take this CSS-only approach into consideration:

input[type=checkbox] {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-appearance: none;
    outline: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

input[type=checkbox]:not(:checked) {
    background-image: url(unchecked.svg);
}

input[type=checkbox]:checked {
    background-image: url(checked.svg);
}


See this example: 

input[type=checkbox] {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-appearance: none;
    outline: 0;
}
input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="%23000" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}
<input type="checkbox" id="check" />
<div></div>

As others have said, you can use a proxy element (div) and change checkbox state checked/unchecked when the div is clicked. Following is the working example of exactly what you require: (i have used simple javascript so that the readers can understand it quickly)

Step by step guide:

1) First of all create two css classes one for checked state and one for unchecked state:

.image-checkbox {
    background:url(unchecked.png);
    width:30px;
    height:30px;
}

.image-checkbox-checked {
    background:url(checked.png);
    width:30px;
    height:30px;
}

2) Create the HTML for DIVs and Checkboxes. The idea is that for each checkbox (input type=checkbox) we will have a div. The id of the div will be suffixed by the word proxy so that we can identify it. Also for each proxy div we will assign the initial class .image-checkbox. Let say we create two checkboxes:

<div id="checkbox1_proxy" class="image-checkbox" />
<div id="checkbox2_proxy" class="image-checkbox" />

Originl Checkboxes (hide it with style property [visibility: hidden])

<input id="checkbox1" name="checkbox1" type="checkbox"  />
<input id="checkbox2" name="checkbox2" type="checkbox"  />

3) Now we will need some javascript code to set checkbox to checked/unchecked when the proxy elements (DIVs) are clicked. Also we need to change the background image of Proxy divs according to the current state of checkbox. We can call a function to attach event handlers when the document is loaded:

<body onload="load()">

<script type="text/javascript">
function load() {
    var all_checkbox_divs = document.getElementsByClassName("image-checkbox");

    for (var i=0;i<all_checkbox_divs.length;i++) {

        all_checkbox_divs[i].onclick = function (e) {
            var div_id = this.id;
            var checkbox_id =div_id.split("_")[0];
            var checkbox_element = document.getElementById(checkbox_id);

            if (checkbox_element.checked == true) {
                checkbox_element.checked = false;
                this.setAttribute("class","image-checkbox");
            } else {
                checkbox_element.checked = true;
                this.setAttribute("class","image-checkbox-checked");
        }

        };
    }

}
</script>

Thats all... i hope it helps


Here is an example, done with a little jQuery and CSS: DEMO

$(".checkbox").click(function() {
  $(this).toggleClass('checked')
});
.checkbox {
  width: 23px;
  height: 21px;
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}

.checked {
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="checkbox">
</div>

Tags:

Html

Css

Jquery

Recent Posts