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

Answer 2

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

Answer 3

复选框没有背景颜色属性。您可以将其包装在某个div标签中，并为该div提供背景颜色。

 <div style="height:100%;float:left;background-color: red;" class="evenRow">
    <input type="checkbox" name="genre" id="check-1" value="" width="20" height="20" style="width:20px; height:20px; float:left;">
 </div>

<强> Working Demo

Answer 4

我没有你想要的确切答案，但无论如何我都有解决方案。

您可以继续ThemeRoller，创建主题，然后将其下载为zip。你会找到一些帮助Here 希望这能帮到你！

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

4 个答案: