add an image to a html type input check box or radio

Question

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: u         


        

Answer 1

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:

  

        

            
            

            Select one
        
        

            
            

            Select two
        
    

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;
    }