How to style attachment fields

Change the way that attachment fields look with CSS

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

filefieldfilefield

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>

Did this page help you?