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樣式,但它不應該適用於我的表格下面的所有輸入文本?
有什麼想法?
輸出是什麼樣的。是否有匹配選擇器'#contactform .text-input'的元素? –
此問題與http://stackoverflow.com/questions/3714143/how-to-align-items-in-a-hpanelgrid-to-the-right –
相關請注意,「
回答
默認情況下,輸出
<h:inputText ...>
不應具有任何class
屬性。您可以通過在JSF標籤定義
styleClass
屬性添加的屬性class
查看reference的細節來源
2011-07-22 12:32:49
看一看的API。有可以設置
來源
2011-07-22 12:36:55 Sean
的CSS類選擇開始
.
屬性styleClass
,你應該嘗試以下操作:來源
2011-07-22 13:08:58 Jasper
謝謝@Psy,它的工作原理。 但我必須爲此做所有? –
@Valter需要該樣式的每個組件都需要'styleClass =「文本輸入」'屬性。 – Jasper
好吧,現在我明白了。 謝謝兄弟。 –
在大多數情況下,它更適合使用H:outputLabel。我沒有將問題應用於h:outputLabel,但是在使用h:outputText時遇到了類似的css應用程序問題。
來源
2014-04-13 20:18:18 DougMH
相關問題