Wie CSS anzuwenden auf a <h:inputText - >?
Ich versuche, CSS anzuwenden, um meine <h:inputText>
aber ohne Erfolg bisher :
<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>
Mein CSS:
#contactform .text-input{
background-color:#fbfbfb;
border:solid 10px #000000;
margin-bottom:8px;
width:178px;
padding:8px 5px;
color:#797979;
}
Wenn ich versuche das CSS in HTML-input-Feld funktioniert es, aber nicht in JSF 2.0.
EDIT:
Update dieser Teil von meinem code in JSF:
<h:inputText id="name" styleClass="text-input" value="#{contact.client.name}" >
Fügen Sie diesen code in meine CSS-Datei:
text-input{
border:solid 1px #e0e0e0;
}
Aber es scheint die gleiche Sache, nichts ändern.
Ausgabe:
<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>
EDIT 2:
Es ist etwas seltsam hier.
Update mein code mit der Hilfe von Euch:
<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>
also mein CSS ist jetzt so:
.contactform .text-input{
background-color:#fbfbfb;
border:solid 50px #000000;
margin-bottom:8px;
width:178px;
padding:8px 5px;
color:#797979;
}
habe ich, wenn ich den css-style in eine bestimmte input-text funktioniert es, aber es sollte nicht gelten für alle Eingabe-text unten in meiner Tabelle ?
Irgendeine Idee?
- Was bedeutet die Ausgabe Aussehen. Gibt es ein element passenden Selektor
#contactform .text-input
? - diese Frage ist im Zusammenhang mit stackoverflow.com/questions/3714143/...
- Beachten Sie, dass die
<table>
hat eineclass
- Attribut, aber nicht einid
. Die Auswahl sollte dann.contactform .text-input
nicht#contactform .text-input
form nicht enthaltenid
Attribut entweder. - die id-form ich-form, kann etwas im Zusammenhang mit den css-Klassen ?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den Ausgang
<h:inputText ...>
sollten keineclass
Attribut standardmäßig. Sie können eine derclass
Attribut durch die Definition einerstyleClass
- Attribut in das JSF-tagSehen die Referenz für details
CSS class selector starten mit
.
Sie sollten versuchen, die folgenden:styleClass="text-input"
Attribut.Werfen Sie einen Blick auf die API. Es ist ein Attribut
styleClass
eingestellt werden kannIn den meisten Fällen ist es mehr angemessen, h:outputLabel. Ich habe nicht hatte Probleme mit der Anwendung von css h:outputLabel, aber habe ähnliche css-Anwendung leiden, wie Sie mittels h:outputText.