How to style attachment fields

An attachment field is made up of multiple parts, each with their own classes assigned to them to allow styling.

filefield

The field name is like all other field names. If you want to add a particular class to the question, that can be done with render attributes. However, the other parts of an attachment question include:

Upload button
File Table
Empty Message

These emlements are rendered in the order given above.

These leverage 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

The table is built like this example:

<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>