How can we change background color of checkbox and radio using css3?

Question

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

How can we change background color of checkbox and radio using css3?

Possible duplicate of http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — Kiril, Apr 16 '14 at 07:41

score 1 · Accepted Answer · answered Apr 16 '14 at 09:06

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

score 0 · Answer 2 · answered Apr 16 '14 at 07:40

0

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

answered Apr 16 '14 at 07:40

waki

1,248
2
17
27

score 0 · Answer 3 · answered Apr 16 '14 at 07:40

Checkbox do not have background coplor property. You can instead wrap it in some div tag and give background color to that 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

score 0 · Answer 4 · answered Apr 16 '14 at 07:42

0

I don't have the exact answer you're looking for but I do have a solution anyway.

You can go on ThemeRoller, you create your theme and you'll then download it as a zip. You'll find some help Here Hope this helped you !

answered Apr 16 '14 at 07:42

Kevin Gilles

463
1
8
23

How can we change background color of checkbox and radio using css3?

4 Answers4