css - selectManyButton 的自定义 .ui-state-active 样式

Question

我想在 primefaces 5.1 中为 selectManyButton 添加自定义样式。我要更改的样式绑定(bind)到 .ui-state-active 类。当我更改此类时，我获得了 selectManyButton 的自定义样式，但引用此样式类的所有其他元素也发生了更改。我怎样才能使某个特定元素更改为定义的样式？

<p:selectManyButton  value="#{projektCriteriaBean.selectedOptions}" >
        <f:selectItems value="#{projektCriteriaBean.yearSelection}"  />
        <p:ajax listener="#{projektCriteriaBean.changeDate}"  update=":form:startDate,:form:endDate" />
    </p:selectManyButton>

Answer 1

您需要为您的按钮指定一个 id 或 styleClass。

<h:form id="my_form">
    <p:selectManyButton id="my_unique_selector" styleClass="generic-selector"
            value="#{projektCriteriaBean.selectedOptions}">
        <!--  ... -->
    </p:selectManyButton>
</h:form>

id 和class 之间的区别是一个 HTML 问题，有解释 here .

我包含了 h:form，因为父命名容器会影响生成的客户端 ID。更多关于 here .

现在您可以按类对按钮进行样式化:

.generic-selector .ui-state-active {
    background-color: red;
}

或者通过id:

#my_form\:my_unique_selector .ui-state-active {
    background-color: red;
}

冒号是 JSF 命名容器的默认分隔符 char。需要用反斜杠转义，因为:在CSS中有特殊含义。更多关于 here .