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

Question

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

问题是我不能使用 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 class，然后 AutoComplete 将它放在了 span 标签上。

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

Answer 1

JSF 在这方面只不过是一个 html 生成器，就像普通的 html 一样，不需要 class on 一个元素，可以用它来设置样式。如果 class 在父级或其祖先之一上，您也可以使用它来设置样式。这都是基本的 css 并且在 Internet 上的数千个站点上都有描述。

.inputTop input {
    background-color: red;
}

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

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

How to overwrite CSS style in Primefaces AutoComplete?

xhtml

primefaces