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 eine class - Attribut, aber nicht ein id. Die Auswahl sollte dann .contactform .text-input nicht #contactform .text-input form nicht enthalten id Attribut entweder.
  • die id-form ich-form, kann etwas im Zusammenhang mit den css-Klassen ?
InformationsquelleAutor Valter Silva | 2011-07-22
Schreibe einen Kommentar