Question

我正在尝试将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样式它可以工作，但是它不应该应用于我表格中的所有输入文本？

有什么想法吗？

Answer 1

默认情况下，输出<h:inputText ...>不应包含任何class属性。您可以通过在JSF标记

中定义class属性来添加styleClass属性

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

有关详细信息，请参阅reference

Answer 2

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

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

Answer 3

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

Answer 4

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

如何将CSS应用于<h：inputtext>？</h：inputtext>

4 个答案: