css3 - 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 have above checkboxlist contains multiple checkboxes. change background color grey , color of label white when mouse hovers upon respective checkbox or label. how achieve changing style in css?

i tried following in css file referring checkboxlist's id not work:

#fruitsid:hover { color:white; background-color:grey; } 

the generated html 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 way can refer each label , change css style 1 mentioned above?

thanks!

you can use css3 startswith selector:

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

btw checkboxes (and radiobuttons too) special items, rendered differently basing on browser / operative system, , hard style css only.

the snippet above correct target item (even checkbox or radiobutton), problem can't ask. change size or position, example, not color / background-color, because don't have properties.

there several solutions this, 2 famous are:

1. hiding real checkbox , showing element (a span image, usually):

   this used when crossbrowser/cross-os rendering mandatory, and/or when there need show better / different graphical object (i've used checkboxes lock/unlock symbols, example). guess it's not case.

2. wrapping checkbox in element (eg. div) , styling element:

   this appears case. there no need wrap in div, btw, label element next checkbox enough case. problem <s:checkboxlist/> tag generating html you, without labels, should avoid using tag in order able add custom html;

   change tag single checkboxes tags generated inside iterator... or plain html elements, keep 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 generate following output, can style 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/>