css - 设置p :selectManyCheckbox的每个复选框的背景色

我正在使用这个http://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsf
primefaces组件获取动态booleanCheckboxes值

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

我需要对所有 bool 复选框应用不同的颜色，如下图所示



我们知道这些是电影中的动态值，那么如何从backing bean设置这些动态复选框的背景色呢？

我尝试将样式应用于selectManyCheckbox，但将其作为背景颜色应用于整个selectManyCheckbox面板。

所以我应该如何动态地将颜色从支持bean设置为selectManyCheckbox值？

最佳答案

使用纯CSS3可能可行

根据您的实际要求。假定最后一个复选框使用的html结构是与您链接到的示例中相同的默认结构，则以下方法应该是纯CSS3的方法来实现。

请注意，此方法并未将颜色特定地绑定(bind)到特定的影片/id，而是始终将第一部影片设置为红色，将第二部影片设置为橙色，等等。它也有实际限制。如果您打算列出100部电影，每种类型的具有唯一的颜色，那么这是而不是的方法。

但是(如果您列出的是一小套(最多10个？)，或者您不介意(如果颜色经过一定的小采样后重复)，那么这可能是您的最佳选择。

Here's a fiddle showing both of the following

小套

.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;
}

重复四色

.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;
}

关于css - 设置p :selectManyCheckbox的每个复选框的背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12420004/