title: How to overwrite CSS style in Primefaces AutoComplete?
body: <p>As far as I know the <code>AutoComplete</code> component generates a <code>span</code> element with an <code>input</code> inside. I want to link said <code>input</code> to a certain class in my stylesheet so it can be just like the second and third normal input fields here:</p>
  
  <p><a href="http://i.imgur.com/LKLnA2V.png" rel="nofollow">Link to imgur, I can't embed images yet</a></p>
  
  <p>The problem is I can't use the <code>style</code> or <code>styleClass</code> attributes since they seem to only affect the <code>span</code> tag.</p>
  
  <p>Some code:</p>
  
  <pre><code>&lt;p:autoComplete value="#{requestForm.recipientString}"
                  completeMethod="#{requestForm.recipientAutoComplete}"
                  widgetVar="forWidget" minQueryLength="3" scrollHeight="200"
                  styleClass="inputTop" /&gt;
  
  
  &lt;p:inputText value="#{requestForm.reference}"
                  widgetVar="referenceWidget" styleClass="inputTop" /&gt;
  </code></pre>
  
  <p>As you can see I use the <code>inputTop</code> class on both components but then the <code>AutoComplete</code> places it on the <code>span</code> tag.</p>
  
  <p>Is there a way to fix this? I don't see any other attribute in the guide to accomplish this -since the <code>panelStyleClass</code> only affects the autocomplete panel- and I don't want to edit the theme itself.</p>