title: How apply CSS on a <h:inputText>?
body: <p>I'm trying to apply CSS to my <code>&lt;h:inputText&gt;</code> but without success so far :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h:form id="contactform"&gt;
      &lt;h:panelGrid columns="3"&gt;
          &lt;h:outputLabel for="name"&gt;Name&lt;/h:outputLabel&gt;
          &lt;h:inputText id="name" value="#{contact.client.name}" &gt;
              &lt;f:ajax event="blur" render="nameMessage"&gt;&lt;/f:ajax&gt;
          &lt;/h:inputText&gt;
          &lt;h:message id="nameMessage" for="name" /&gt;
  
      &lt;h:commandButton value="Send" action="#{contact.sendMessage}"&gt;
          &lt;f:ajax execute="@form" render="@form" /&gt;
      &lt;/h:commandButton&gt;
      &lt;h:messages globalOnly="true" layout="table" /&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#contactform .text-input{
      background-color:#fbfbfb;
      border:solid 10px #000000;
      margin-bottom:8px;
      width:178px;
      padding:8px 5px;
      color:#797979;
  }
  </code></pre>
  
  <p>If i try to apply this CSS style in some HTML input field it works, but not in JSF 2.0.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Update this part of my code in JSF:</p>
  
  <pre><code>&lt;h:inputText id="name" styleClass="text-input" value="#{contact.client.name}"  &gt;
  </code></pre>
  
  <p>Insert this code in my CSS file:</p>
  
  <pre><code>text-input{
      border:solid 1px #e0e0e0;
  }
  </code></pre>
  
  <p>But it seems the same thing, nothing change.</p>
  
  <p>Output:</p>
  
  <pre><code>&lt;form id="j_idt35" name="j_idt35" method="post" action="/brainset/contact.xhtml" enctype="application/x-www-form-urlencoded"&gt; 
  &lt;input type="hidden" name="j_idt35" value="j_idt35" /&gt; 
  &lt;table class="contactform"&gt; 
      &lt;tbody&gt; 
          &lt;tr&gt; 
              &lt;td&gt;&lt;label for="j_idt35:name"&gt; Name&lt;/label&gt;&lt;/td&gt; 
              &lt;td&gt;&lt;input id="j_idt35:name" type="text" name="j_idt35:name" class="text-input" onblur="mojarra.ab(this,event,'blur',0,'j_idt35:nameMessage')" /&gt;&lt;/td&gt; 
              &lt;td&gt;&lt;span id="j_idt35:nameMessage"&gt;&lt;/span&gt;&lt;/td&gt; 
          &lt;/tr&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>There is something weird here.
  Update my code with the help of you guys:</p>
  
  <pre><code>&lt;h:form&gt;
      &lt;h:panelGrid id="contactform" styleClass="contactform" columns="3"&gt;
          &lt;h:outputLabel for="name"&gt;Nome&lt;/h:outputLabel&gt;
          &lt;h:inputText id="name" value="#{contact.client.name}"  &gt;
              &lt;f:ajax event="blur" render="nameMessage"&gt;&lt;/f:ajax&gt;
          &lt;/h:inputText&gt;
          &lt;h:message id="nameMessage" for="name" /&gt;
      &lt;/h:panelGrid
  &lt;/h:form&gt;
  </code></pre>
  
  <p>so my CSS style is now this way:</p>
  
  <pre><code>.contactform .text-input{
      background-color:#fbfbfb;
      border:solid 50px #000000;
      margin-bottom:8px;
      width:178px;
      padding:8px 5px;
      color:#797979;
  }
  </code></pre>
  
  <p>if i apply the css style in a specific input-text it works, but it shouldn't apply to all input-text below in my table ?</p>
  
  <p>Any idea?</p>