<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!