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

Question

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

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

现在您可以通过 class:

来设计您的按钮

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

或按 id:

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

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

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

custom .ui-state-active -style for selectManyButton

css

primefaces