如何在 <h:inputText> 上应用 CSS？答案

【问题标题】：How apply CSS on a <h:inputText>?如何在 <h:inputText> 上应用 CSS？
【发布时间】：2011-10-11 00:34:51
【问题描述】：

我正在尝试将 CSS 应用到我的 <h:inputText> 但到目前为止没有成功：

<h:form id="contactform">
    <h:panelGrid columns="3">
        <h:outputLabel for="name">Name</h:outputLabel>
        <h:inputText id="name" value="#{contact.client.name}" >
            <f:ajax event="blur" render="nameMessage"></f:ajax>
        </h:inputText>
        <h:message id="nameMessage" for="name" />

    <h:commandButton value="Send" action="#{contact.sendMessage}">
        <f:ajax execute="@form" render="@form" />
    </h:commandButton>
    <h:messages globalOnly="true" layout="table" />
</h:form>

我的 CSS：

#contactform .text-input{
    background-color:#fbfbfb;
    border:solid 10px #000000;
    margin-bottom:8px;
    width:178px;
    padding:8px 5px;
    color:#797979;
}

如果我尝试在某些 HTML 输入字段中应用这种 CSS 样式，它可以工作，但在 JSF 2.0 中不行。

编辑：

在 JSF 中更新我的这部分代码：

<h:inputText id="name" styleClass="text-input" value="#{contact.client.name}"  >

在我的 CSS 文件中插入这段代码：

text-input{
    border:solid 1px #e0e0e0;
}

但看起来还是一样的，没什么变化。

输出：

<form id="j_idt35" name="j_idt35" method="post" action="/brainset/contact.xhtml" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt35" value="j_idt35" /> 
<table class="contactform"> 
    <tbody> 
        <tr> 
            <td><label for="j_idt35:name"> Name</label></td> 
            <td><input id="j_idt35:name" type="text" name="j_idt35:name" class="text-input" onblur="mojarra.ab(this,event,'blur',0,'j_idt35:nameMessage')" /></td> 
            <td><span id="j_idt35:nameMessage"></span></td> 
        </tr> 
</form>

编辑 2：

这里有些奇怪。在你们的帮助下更新我的代码：

<h:form>
    <h:panelGrid id="contactform" styleClass="contactform" columns="3">
        <h:outputLabel for="name">Nome</h:outputLabel>
        <h:inputText id="name" value="#{contact.client.name}"  >
            <f:ajax event="blur" render="nameMessage"></f:ajax>
        </h:inputText>
        <h:message id="nameMessage" for="name" />
    </h:panelGrid
</h:form>

所以我的 CSS 样式现在是这样的：

.contactform .text-input{
    background-color:#fbfbfb;
    border:solid 50px #000000;
    margin-bottom:8px;
    width:178px;
    padding:8px 5px;
    color:#797979;
}

如果我在特定的输入文本中应用 css 样式，它可以工作，但它不应该应用于我表格中下面的所有输入文本？

有什么想法吗？

【问题讨论】：

输出是什么样的。是否有匹配选择器#contactform .text-input的元素？
这个问题与stackoverflow.com/questions/3714143/…有关
请注意，<table> 具有 class 属性，但没有 id。选择器应该是.contactform .text-input 而不是#contactform .text-input 该表单也不包含id 属性。
我的表单的id，可以是与css类相关的东西吗？

标签： java css jsf jsf-2

【解决方案1】：

在大多数情况下，使用 h:outputLabel 更合适。我在将 css 应用到 h:outputLabel 时没有遇到问题，但是在使用 h:outputText 时遇到了类似的 css 应用程序问题。

【讨论】：

【解决方案2】：

CSS 类选择器以. 开头，您应该尝试以下操作：

.text-input{
   border:solid 1px #e0e0e0;
}

【讨论】：

感谢@Psy，它有效。但我必须为所有做这个？
@Valter 每个需要该样式的组件都需要styleClass="text-input" 属性。
好的，现在我明白了。谢谢老兄。

【解决方案3】：

看看API。有一个属性styleClass可以设置

【讨论】：

【解决方案4】：

默认情况下，输出<h:inputText ...> 不应具有任何class 属性。您可以通过在 JSF 标记中定义 styleClass 属性来添加 class 属性

<h:inputText id="name" styleClass="text-input" value="#{contact.client.name}" >
</h:inputText>

详情请见reference

【讨论】：