Alternate background color of form checkboxes

Question

I'm making a simple form and want to alternate the background color of each option like you can for tables using CSS tr:nth-child(even){background-color: #f2f2f2;}

For the form I tried using ids that linked to CSS with different background colors:

function options(){
        var i =0;
        var name;
        $(xmlDoc).children().children().each(function(){
            name = $(this).children().first().text();
            if(i % 2 == 0){
                $('form').append(" <input type='checkbox' id=odd'" + "value=" + name + ">"+ name + "<br>");
            }
            else{
                $('form').append(" <input type='checkbox' id='even'" + "value=" + name + ">"+ name + "<br>");
            }
            i++;
        });
    }

but have found that you can only change the background color by indicating it in the form. Is there any other way to do this?

If you could setup a `jsfiddle` it would make it easier to resolve — tcasey, Jul 28 '16 at 22:41
http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — yuriy636, Jul 28 '16 at 22:47

score 2 · Answer 1 · answered Jul 28 '16 at 22:35

2

Have you tried:

input[type="checkbox"]:nth-of-type(2n-1) {
background-color: #222222;
}

input[type="checkbox"]:nth-of-type(2n) {
background-color: #f2f2f2;
}

answered Jul 28 '16 at 22:35

Rounin

27,134
9
83
108

score 0 · Accepted Answer · answered Jul 29 '16 at 17:11

To change the color of the form you have to call it from the form

<form style="background-color: #E0FFFF"></form>

and can't do anything for specific inputs. To combat this I have found that you have to turn the entire thing into a list and then can use

li:nth-child(even) {background-color: #f2f2f2;}

inside your CSS. The HTML looks like this:

<ul style='list-style-type: none;><li><input type='checkbox' id='name' value='name'>name<br></li></ul>

the styling of the ul is to get rid of bullet points.

Alternate background color of form checkboxes

2 Answers2