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

【问题标题】：custom .ui-state-active -style for selectManyButtonselectManyButton 的自定义 .ui-state-active 样式
【发布时间】：2015-01-03 23:49:11
【问题描述】：

我想在 primefaces 5.1 中为 selectManyButton 添加自定义样式。我要更改的样式绑定到 .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>

【问题讨论】：

标签： css primefaces

【解决方案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命名容器的默认分隔符。需要用反斜杠转义，因为:在CSS中有特殊的含义。更多关于 here.

【讨论】：

太好了，它有效！非常感谢您的快速和合格的回答。我可以节省我的周日晚上。