表单复选框的备用背景色

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?

Answer 1

Have you tried:

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

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

Answer 2

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.