1 
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 代码。我想要的是自定义复选框，并在未选中时显示图像，在选中时显示另一个图像。但是发生的情况是，无论何时检查图像都不会显示。希望你能帮我解决这个问题。谢谢！

4

1 回答 1

0

使用 chrome 或 ff 开发工具检查元素以确保样式正确应用。

于 2014-02-10T00:25:47.253 回答