jquery - 我们如何使用 css3 更改复选框和单选框的背景颜色？

Question

我们如何使用 css3 更改复选框和单选框的背景颜色？

 <input type="checkbox" name="genre" id="check-1" value="" width="20" height="20" style="width:20px; height:20px; float:left;background: red;">

我们如何使用 css3 更改复选框和单选框的背景颜色？

Answer 1

li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {

    /* Hide the input, but have it still be clickable */
    opacity: 0;

    float: left;
    width: 18px;
}


li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;

    /* Left padding makes room for image */
    padding: 5px 0 4px 24px;

    /* Make look clickable because they are */
    cursor: pointer;

    background: url(off.png) left center no-repeat; 
}

    /*
        Change from unchecked to checked graphic
    */
    li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
        background-image: url(radio.png);
    }
    li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
        background-image: url(check.png);
    }

Reference

css-tricks