css - Primefaces:具有不同颜色的 CheckBoxMenu

Question

我想在 <p:selectCheckboxMenu> 中显示 selectItems有不同的颜色或背景，我该怎么做？有人知道吗？谢谢。

<p:selectCheckboxMenu id="testresultfilter"  value="#{testrunBean.selectedFilterResult}" filter="true" label="Execution Status" immediate="true"  valueChangeListener="#{testrunBean.handleResultChange}" style="vertical-align:middle;"  panelStyle="width:220px;" onchange="executeStatusOnChange();">           
   <f:selectItems value="#{testrunBean.validResults}" />                                 
</p:selectCheckboxMenu >

Answer 1

是的，在 css 的帮助下。

CSS

.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item:nth-child(3) {
  color: aqua;
  background: #ff00ff;
}

.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item:nth-child(2) {
  color: blue;
  background: #ffff00;
}

.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item:nth-child(1) {
  color: green;
  background: #ff0000;
}