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

Gsm
  • 150
  • 1
  • 2
  • 9

2 Answers2

1

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:

  1. 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.

  2. 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/>
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
0

This answer works for all check in my webpages!

input[type="checkbox"]:hover + label {
    color: #fff;
    border-color: #1b7aa9;
    background-color: #239fdb;
}
ykchen
  • 1