Question

我想在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>

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。

selectManyButton的自定义.ui-state-active -style

1 个答案: