Change the background color of each element in the checkboxlist in struts2 when hovered

<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!

Solution

You can use CSS3 startswith selector:

input[id^="selectfruits"]:hover{
    /* your custom style here */
}

BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.

The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.

There are several solutions to this, but the two most famous are:

Hiding the real checkbox and then showing another element (a span with an image, usually):

This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:

this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;

change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
```
<s:iterator value="fruits" status="ctr"> 

    <input type="checkbox" 
           name="selectfruits" 
          class="chkFruits" 
          value="<s:property value='%{id}'/>"
             id="selectfruits-<s:property value='%{#ctr.count}'/>">

    <label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
        <s:property value='%{description}'/>
    </label>

    <br/><br/>
</s:iterator>
```
that will generate the following output, that you can style with standard selectors:

.chkFruits:hover + .lblFruits {
  background-color: blue;
  color: white;
}

<input type="checkbox" name="selectfruits" value="AWARD" 
       id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1"  class="lblFruits">Apple</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="CLIST" 
       id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2"  class="lblFruits">Guava</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="HAN" 
       id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3"  class="lblFruits">Orange</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="POS" 
       id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4"  class="lblFruits">Melon</label>
<br/><br/>