Set background color of every individual checkbox of p:selectManyCheckbox

Question

I am using this http://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsf primefaces componenent to get dynamic booleanCheckboxes values

<p:selectManyCheckbox value="#{bean.selectedMovies}"  
            layout="pageDirection">  
            <f:selectItems value="#{bean.movies}" />  
        </p:selectManyCheckbox> 

I need to apply different colors to all boolean checkboxes as shown in below image

if id=1 then color will be red if id=2 then color will be orange and so on.

As we know these are the dynamic values in movies, so how can I set background-color to these dynamic checkboxes from backing bean ?

I tried to apply style to selectManyCheckbox but it applies as a background color to whole selectManyCheckbox panel.

so how should I set color from backing bean to selectManyCheckbox values dynamically ?

Answer 1

May be Doable with Pure CSS3

Depending on your actual requirements. Assuming the same html structure for the final check boxes is the default structure as in the example you link to, then the following should be a pure css3 way to accomplish it.

Note that this method does not specifically tie the color to a particular movie/id, it always sets the first movie to red, the second to orange, etc. It also has a practical limitation. If you plan to list 100 movies, each with a unique individual color, then this is not the method for you.

But if you are listing a small set (10 max?), or you don't mind if the colors repeat after a certain small sampling, then this may well be your best choice.

Here's a fiddle showing both of the following

Small Set

.ui-selectmanycheckbox tr:nth-of-type(1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(3) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4) .ui-state-default {
    background-color: orange;
}

Repeating 4-Colors

.ui-selectmanycheckbox tr:nth-of-type(4n+1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+3) .ui-state-default {
    background-color: green;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+4) .ui-state-default {
    background-color: blue;
}