Question

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代码。我想要的是自定义复选框，以便在未选中时显示图像，在选中时显示另一个图像。但是，无论何时检查图像都不会显示图像。希望你能帮助我。谢谢！

Answer 1

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

选中后，自定义复选框不显示图像

1 个答案: