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> </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>
Updated over 1 year ago