How to Style Attachment Fields

An attachment field is made up of multiple parts, each with its own assigned classes to allow styling. The following parts of the attachment question can use cystomized styles:

• Upload button
• File table
• Empty message

These elements are rendered in the order displayed above. Each element uses the following classes to allow styling via CSS:

• fileinput-button
• empty-message
• file-table
• file-header
• file-row
• file-container
• file-filename
• file-filesize
• file-status
• file-actions

For example, to achieve the table used in the following image, the code below the image was applied:

<ul class="file-table">
  <div class="file-header">
    <li class="file-row">
      <span>File Name</span>
      <span>File Size</span>
      <span>Status</span>
      <span>&nbsp;</span>
    </li>
  </div>
  <div class="file-container">
    <li class="file-row">
      <span class="file-filename">indexes4.JPG</span>
      <span class="file-filesize">54.60 KB</span>
      <span class="file-status">Uploaded</span>
      <span class="file-actions"><a href="#">Remove</a></span>
    </li>
  </div>
</ul>