2011-07-22 46 views
0

我嘗試應用CSS我<h:inputText>但沒有成功至今:如何在<h:inputText>上應用CSS?

<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樣式,但它不應該適用於我的表格下面的所有輸入文本?

有什麼想法?

+0

輸出是什麼樣的。是否有匹配選擇器'#contactform .text-input'的元素? –

+0

此問題與http://stackoverflow.com/questions/3714143/how-to-align-items-in-a-hpanelgrid-to-the-right –

+0

相關請注意,「

」具有「class」屬性,但不是'id'。選擇器應該是'.contactform .text-input'而不是'#contactform。text-input'表單也不包含'id'屬性。 –

回答

6

默認情況下,輸出<h:inputText ...>不應具有任何class屬性。您可以通過在JSF標籤

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

定義styleClass屬性添加的屬性class查看reference的細節

1

看一看的API。有可以設置

2

的CSS類選擇開始.屬性styleClass,你應該嘗試以下操作:

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

謝謝@Psy,它的工作原理。 但我必須爲此做所有? –

+0

@Valter需要該樣式的每個組件都需要'styleClass =「文本輸入」'屬性。 – Jasper

+0

好吧,現在我明白了。 謝謝兄弟。 –

0

在大多數情況下,它更適合使用H:outputLabel。我沒有將問題應用於h:outputLabel,但是在使用h:outputText時遇到了類似的css應用程序問題。