I was finding the solution on the net for custom checkbox for one of my projects. Yes there are lots of help and script available, but I found that those are very complicated and with huge scripts. To overcome this I created my simple and easy custom checkbox with crossbrowser compatibility,

What you will need?

  1. Two Images: a) Empty Checkbox Image nocheck1, b) Checked Checkbox Image checked
  2. CSS
  3. Two Javascript functions

… that’s it!

Lets build the custom checkbox.

First create the javascript functions:

function chked(field, image1, image2){
  document.getElementById(image1).style.display = 'none';
  document.getElementById(image2).style.display = 'block';
  document.getElementById(field).checked = true;
}
function unchk(field, image1, image2){
  document.getElementById(image1).style.display = 'block';
  document.getElementById(image2).style.display = 'none';
  document.getElementById(field).checked = false;
}

Now build the CSS:

<div id="checks">
  <img src="nocheck.gif" id="img1" onclick="chked('check1', 'img1', 'img2');" />
  <img src="checked.gif" id="img2" onclick="unchk('check1', 'img1', 'img2');" style="display:none;" />
  <input type="checkbox" name="check1" id="check1" class="noBorder" />
</div>

This will look like below image:
custom_checkbox1

And the result will be:
custom_checkbox2

When the page gets load the unchecked image will be display and onclick event it goes away and checked image will popup instead and the checkbox field will also be checked on same event. So you can pass the value of checked checkbox for your rest of the functionality.

Compare my solution with other articles: