custom .ui-state-active -style for selectManyButton

Question

I want to add a custom style to a selectManyButton in primefaces 5.1. The style I want to change is bound to the .ui-state-active class. When I change this class, I get my custom style for the selectManyButton, but all other elements which refer to this styleclass, changed, too. How can I make that just one certain element change to the defined style?

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

Answer 1

You need to specify an id or styleClass for your button.

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

The difference between id and class is a HTML matter, that is explained here.

I've included the h:form because the parent naming containers affect the resulting client id. More on that here.

Now you can stylize your button by class:

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

Or by id:

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

The colon is a JSF naming container default separator char. It needs to be escaped with a backslash, because : has a special meaning in CSS. More on that here.