CODEWITHSUNDEEP
primefacesxhtml
Mtn
Mtn

Reputation: 43

How to overwrite CSS style in Primefaces AutoComplete?

As far as I know the AutoComplete component generates a span element with an input inside. I want to link said input to a certain class in my stylesheet so it can be just like the second and third normal input fields here:

Link to imgur, I can't embed images yet

The problem is I can't use the style or styleClass attributes since they seem to only affect the span tag.

Some code:

<p:autoComplete value="#{requestForm.recipientString}"
                completeMethod="#{requestForm.recipientAutoComplete}"
                widgetVar="forWidget" minQueryLength="3" scrollHeight="200"
                styleClass="inputTop" />


<p:inputText value="#{requestForm.reference}"
                widgetVar="referenceWidget" styleClass="inputTop" />

As you can see I use the inputTop class on both components but then the AutoComplete places it on the span tag.

Is there a way to fix this? I don't see any other attribute in the guide to accomplish this -since the panelStyleClass only affects the autocomplete panel- and I don't want to edit the theme itself.

Upvotes: 1

Views: 3063

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

JSF is in this regard nothing more than an html generator, and just like with plain html, there is no need to have a class on an element to be able to use it to style something. If the class is on the parent or one of it's ancestors, you can use it to style things as well. This is all basic css and is described on thousands of sites on the internet. 

.inputTop input {
    background-color: red;
}

is an example. You might need to play with selector specificity to get it to actually override possible existing style.

Upvotes: 1

Related Questions