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;
}
これが私のプロジェクトのCSSコードです。私が望むのは、チェックボックスをカスタマイズし、チェックされていないときに画像を表示し、チェックされているときに別の画像を表示することです。しかし、何が起こるかというと、チェックするたびに画像が表示されないということです。これで私を助けてくれることを願っています。ありがとう！