title: How edit <rich:fileUpload> CSS?
body: <p>I'm trying to show only the button <code>add</code> and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by <code>richfaces</code> is always the same:</p>
  
  <p>This is my form using <code>richfaces</code>:</p>
  
  <pre><code>&lt;ui:define name="content"&gt;
          &lt;h:form&gt;
              &lt;h:panelGrid&gt;
                  &lt;rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"  ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" &gt;
                      &lt;a4j:ajax event="uploadcomplete" execute="@none" render="info" /&gt;
                  &lt;/rich:fileUpload&gt;
  
                  &lt;h:panelGroup id="info"&gt;
                      &lt;h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" /&gt;
                      &lt;rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row"&gt;
                          &lt;a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" /&gt;
                      &lt;/rich:dataGrid&gt;
  
                      &lt;br /&gt;
                      &lt;a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size&gt;0}" /&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/h:panelGrid&gt;
          &lt;/h:form&gt;
      &lt;/ui:define&gt;
  </code></pre>
  
  <p>And this is how is generated :</p>
  
  <p><img src="https://i.stack.imgur.com/lf6jF.jpg" alt="form"></p>
  
  <p>I want something more simple 'cause in another moment I will some <code>jQuery slider</code> plugin. But I can't disappear with this table generated by <code>richfaces</code>.
  And yes skins are <a href="https://stackoverflow.com/questions/7429254/richfaces-4-how-to-disable-skins">disable in my richfaces configuration</a>:</p>
  
  <p><strong>update</strong>
  Following the suggestion my CSS look like this now:</p>
  
  <pre><code>    &lt;style&gt;
      div div.rf-fu { border: 0px; width: 85px; }
      div div.rf-fu-hdr { border: 0px; }
      span span.rf-fu-btn-clr { border: 0px; }
      span.rf-fu-btns-lft{ width: 85px; }
      span.rf-fu-btns-rgh{ display: none; }
      div div.rf-fu-lst { display:none; }
      &lt;/style&gt;
  </code></pre>
  
  <p>And now my <code>add..</code> file button looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/zrpsP.jpg" alt="enter image description here"></p>
  
  <p>These post was very useful too:</p>
  
  <p><a href="https://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0">Should I use 'border: none' or 'border: 0'?</a> <br>
  <a href="https://stackoverflow.com/questions/4969977/inner-div-has-borders-how-to-override-with-a-class-on-an-outer-div">Inner div has borders - how to override with a class on an outer div?</a></p>