css - 如何在jsf中正确使用css？

Question

我有这个 JSF 页面和一个工作正常的 css 文件，但是，当我添加表单标签时，css 不适用于 jsf。有人可以帮助我吗？

<f:view contentType="text/html">
    <h:head>
        <h:outputStylesheet library="css" name="LoginCss.css" />
    </h:head>

    <h:body>
         <h:form id="loginForm"> 
              <p:outputLabel id="usernameLabel" value="User name: " />
              <p:inputText id="usernameInput" value=""/> <br/> <br/>

              <p:outputLabel id="passwordLabel" value="Password: " />
              <p:inputText id="passwordInput" value=""/> <br/> <br/>
         </h:form>
    </h:body>

</f:view>

Answer 1

只是详细说明 BalusC 的评论:添加表单后，JSF 会将表单的 ID 添加到其子 ID 之前，因此第一个 inputText 现在将具有 id="loginForm:usernameInput" (正如您在浏览器中使用“显示源代码”或类似内容所看到的那样)。

由于这破坏了样式，我希望您当前使用 id 进行样式设置。更好的做法是改用 styleClass 属性。此外，您可能希望将 inputText 绑定(bind)到 value 属性中的 bean 属性。进一步的建议是使用 p:panelGrid 和 p:password 作为密码:

.usernameInput {
    ...
}
.passwordInput {
    ...
}

和

<p:panelGrid columns="2">
    <p:outputLabel id="usernameLabel" for="usernameInput" value="User name: " />
    <p:inputText id="usernameInput" styleClass="usernameInput" value="#{bean.username}"/>
    <p:outputLabel id="passwordLabel" for="passwordInput" value="Password: " />
    <p:password id="passwordInput" styleClass="passwordInput" value="#{bean.password}"/>
</p:panelGrid>