Add An Image To A Html Type Input Check Box Or Radio

May 30, 2024 Post a Comment

I'm trying to specify an image to be used for my unchecked and checked values for html input type checkbox and radio. I have got this: background: url('image.png') no-repeat; but

Solution 1:

I have found and worked an answer. with help from these forums http://forums.digitalpoint.com/showthread.php?t=665980

all code is below: you can copy to a single file and add your own images and it will work.

<html><scripttype="text/javascript">//global variables that can be used by ALL the function son this page.var inputs;
var imgFalse = '52 0 ROff.png';
var imgTrue = '52 0 ROn.png';

//replace the checkbox with an image and setup events to handle itfunctionreplaceChecks() {
    //get all the input fields on the page
    inputs = document.getElementsByTagName('input');

    //cycle trough the input fieldsfor(var i=0; i<inputs.length; i++) {

    //check if the input is a checkboxif(inputs[i].getAttribute('type') == 'checkbox') {

        //create a new imagevar img = document.createElement('img');

        //check if the checkbox is checkedif(inputs[i].checked) {
            img.src = imgTrue;
        } else {
            img.src = imgFalse;
        }

        //set image ID and onclick action
        img.id = 'checkImage'+i;
        //set image
        img.onclick = newFunction('checkClick('+i+')');

        //place image in front of the checkbox
        inputs[i].parentNode.insertBefore(img, inputs[i]);

        //hide the checkbox
        inputs[i].style.display='none';
    }
}
}

//change the checkbox status and the replacement imagefunctioncheckClick(i) {
if(inputs[i].checked) {
    inputs[i].checked = '';
    document.getElementById('checkImage'+i).src=imgFalse;
} else {
    inputs[i].checked = 'checked';
    document.getElementById('checkImage'+i).src=imgTrue;
}
}

</script></html><body><inputtype="checkbox" /><scripttype="text/javascript">replaceChecks();</script></body>

Solution 2:

Take a look at this Ryan Fait - Custom checkboxes and radio buttons ... Hope it's what you're looking for ;)

Solution 3:

In checkbox if you want to change images or/and color then the optimized way is http://jsfiddle.net/nsoni/4cHSB/5/ here you can click either on "item name" or on "checkbox" and get the effect.

HTML:

  <div class="had">
        <divclass="ch"><inputtype="checkbox"id="sho1"name="chk1"><divclass="so"></div><labelfor="sho1">Select one</label></div><divclass="ch"><inputtype="checkbox"id="sho2"name="chk2"><divclass="so"></div><labelfor="sho2">Select two</label></div></div>

CSS:

input {
               display: none;
    }

        input[type=checkbox]:checked+.so{
              background-image:url('http://goo.gl/3tza1X');
              background-repeat:no-repeat;background-color:green;
              border-radius:50%;background-position: -2px -1px;
    }

        input[type=checkbox]:checked+.so+label{
           color: red;
    }

        .so {
             margin: 2px; float: left;height: 30px;width: 30px;
             border: 3px solid #D8D8D8;background-color: #4679BD;
             border-radius: 5px;
    }

        .show {
               margin-left: 30px;
    }

        .had {
               margin: 50px auto;width: 50%;border: 1px solid black;
               height: 30px;padding:10px;
    }

        .ch {
              float: left;margin-left:20px;width:40%
    }

        label {
               height: 30px;width: 100%;position:relative;
               display:block;margin-top: 5px;
    }

Solution 4:

You cannot style checkboxes and radio buttons by pure CSS. You will need to get a JavaScript plugin (there are plenty of jQuery plugins out there) which will do this for you. Basically, it overlays another element over the default one by keeping the default element's behaviour.

Solution 5:

Here is how I did it. I'm using radio input. The input boxes are hidden and the image in each label changes when the input is selected/not selected.

Jsfiddle: http://jsfiddle.net/EhDsf/