如何在Primefaces AutoComplete中覆盖CSS样式？

Question

据我所知，AutoComplete组件会生成span元素，其中包含input。我想将input链接到我的样式表中的某个类，所以它可以像这里的第二个和第三个普通输入字段一样：

Link to imgur, I can't embed images yet

问题是我无法使用style或styleClass属性，因为它们似乎只会影响span标记。

一些代码：

<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" />

如您所见，我在两个组件上都使用inputTop类，但AutoComplete将其放在span标记上。

有没有办法解决这个问题？我没有在指南中看到任何其他属性来完成此操作 - 因为panelStyleClass仅影响自动完成面板 - 我不想编辑主题本身。

Answer 1

JSF在这方面只不过是一个html生成器，就像使用普通的html一样，没有必要在上创建一个元素，以便能够使用它来设置样式。如果课程在父母或其中一个祖先身上，您也可以使用它来设置样式。这是所有基本的CSS，并在互联网上的数千个网站上进行了描述。

.inputTop input {
    background-color: red;
}

就是一个例子。您可能需要使用selector specificity来实际覆盖可能的现有样式。