body{  
  width:100%;
}

.example-checkbox,.example-radio{
  margin-top:20px auto;
} 
input[type=checkbox],
input[type=radio ]{
  width   : 28px;
  height  : 24px;
  margin  : 0;
  padding : 0;
  opacity : 0;
  filter: "alpha(opacity=0)"; /* IE 8 */
}

input[type=checkbox]+ label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('icon2.png') no-repeat  0px 0px;
  line-height  : 24px;
  opacity : 1;

}
input[type=checkbox]:hover + label{
   background: url('icon2.png') no-repeat 0px -51px;  
 
}
input[type=checkbox]:checked + label{
   background: url('icon2.png') no-repeat 0px -25px;
 
}

input[type=checkbox]:checked:hover + label{
   background: url('icon2.png') no-repeat 0px -81px;
  
}

input[type=radio] + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('icon1.png') no-repeat -0px -2px;
  line-height  : 24px;  
  
}
input[type=radio]:hover + label{
   background: url('icon1.png') no-repeat 0px -26px;   
}
input[type=radio]:checked + label{
   background   : url('icon1.png') no-repeat 0px -50px;
    
}
input[type=radio]:checked:hover + label{
   background: url('icon1.png') no-repeat 0px -78px;
   
}