How to get different background color for different input fields-CodePudding

I have multiple input fields, how to apply different background-color for alternate fields. Right now same color is applied to each input field.

Now, Background color for all input field is red, how can I have different color for alternate input fields.

input {

  background-color : red; 

}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

</table>

CodePudding user response：

No need for multiple classes. Use the :nth-child() Selector

#data tr:nth-child(odd) and #data tr:nth-child(even)

#data tr:nth-child(odd) input {

  background-color : red; 

}

#data tr:nth-child(even) input {

  background-color : blue; 

}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

CodePudding user response：

give the input you'd like to be colored in a different color, a class which will override input {background-color : red;}:

input {

  background-color : red; 

}

.blue {
  background-color: blue
}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

</table>