customizing checkboxes and radio buttons using CSS3

Question

Here i'm having checkboxes and radiobuttons with respective styles

HTML

<h3>Radio buttons</h3>
<div class="radio">
  <input id="radio-1" type="radio" name="Data1" value="agree" checked />
  <label for="radio-1">Yes</label>
  <input id="radio-2" type="radio" name="Data1" value="disagree" />
  <label for="radio-2">No</label>
</div>
<h3>Checkboxes</h3>
<div class="checkbox">
  <input id="checkbox-1" type="checkbox" name="Data2" value="option1" checked />
  <label for="checkbox-1">HTML</label>
  <br />
  <input id="checkbox-2" type="checkbox" name="Data3" value="option2" />
  <label for="checkbox-2">CSS</label>
</div>

i want to change the image on :hover , how can i do this

Working demo

Answer 1

Use this code:

input[type=checkbox] + label:hover:before, input[type=radio] + label:hover:before{
   background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_2.gif?v1'); 
}

Is combines two css pseudo classes - :hover:before to achieve the effect.

I also changed your 'selected' background code from:

background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;

to

background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif');

This is to stop the icon turning from green to grey on hover.

Here it is working: http://jsfiddle.net/tT6tD/1/