'How to get different background color for different input fields

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>
htmlcssinputangular-ui-bootstrap


Solution 1:[1]

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>

Solution 2:[2]

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" class="blue"/></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" class="blue"/></td></tr>

</tbody>

</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Rani Giterman

Related Questions