Customized checkbox does not show image when checked

Customized checkbox does not show image when checked

body {
font: 0.8em/21px arial,sans-serif;
}
/*checkbox declaration*/
.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url('/karentest/images/selected.png') no-repeat;
display: block;
clear: left;
float: left;
}
/*
Hide the original checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
display: none;
float: left;
width: 19px;
}
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
display: none;
/* Left padding for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url('/karentest/images/select.png') left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked +
label {
margin: 0;
padding: 5px 0 4px 24px;
cursor: pointer;
display: block;
background: url('/karentest/images/selected.png') left center no-repeat;
}
Here's the CSS Code of my project. What I want is to customize the
checkbox and for it to display an image when it is not checked and another
image when it is checked. But what happens is that the image is not
displayed whenever it is checked. Hope you can help me with this. Thanks!