file
The .file element is a simple
interactive label that wraps an <input type="file">. It comprises several sub-elements:
-
.filethe main container-
.file-labelthe actual interactive and clickable part of the element-
.file-inputthe native file input, hidden for styling purposes -
.file-ctathe upload call-to-action-
.file-iconan optional upload icon -
.file-labelthe "Choose a file…" text
-
-
.file-namea container for the chosen file name
-
-
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
Modifiers
With the .has-name modifier combined with the .file-name element
You can move the CTA to the
right side with the .is-right modifier.
You can also
expand the name to fill up the space with the .is-fullwidth modifier.
You can have a
boxed block with the .is-boxed modifier.
You can
combine .has-name and .is-boxed.
Colors: You can style the file element by appending one of the 10 color modifiers:
