The file
element is a simple interactive label that wraps an <input type="file">
. It comprises several sub-elements:
-
file
the main container
-
file-label
the actual interactive and clickable part of the element
-
file-input
the native file input, hidden for styling purposes
-
file-cta
the upload call-to-action
-
file-icon
an optional upload icon
-
file-label
the "Choose a file…" text
-
file-name
a container for the chosen file name
Modifiers
#
With the has-name
modifier combined with the file-name
element, you can add a placeholder for the selected file name.
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:
-
is-white
-
is-black
-
is-light
-
is-dark
-
is-primary
-
is-link
-
is-info
-
is-success
-
is-warning
-
is-danger
Sizes
#
You can append one of 3 additional sizes:
-
is-small
-
is-medium
-
is-large
Alignment
#
You can align the file input:
-
to the center with the
is-centered
modifier
-
to the right with the
is-right
modifier
JavaScript
#
A file upload input requires JavaScript to retrieve the selected file name.
Here is an example of how this could be done:
Variables
#
You can use
these variables
to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
Name |
Type |
Default value |
Computed value |
Name |
Type |
Default value |
Computed value |
$file-border-color
|
color
|
$border
|
hsl(0, 0%, 86%)
|
$file-radius
|
size
|
$radius
|
4px
|
$file-cta-background-color
|
color
|
$white-ter
|
hsl(0, 0%, 96%)
|
$file-cta-color
|
color
|
$grey-dark
|
hsl(0, 0%, 29%)
|
$file-cta-hover-color
|
color
|
$grey-darker
|
hsl(0, 0%, 21%)
|
$file-cta-active-color
|
color
|
$grey-darker
|
hsl(0, 0%, 21%)
|
$file-name-border-color
|
color
|
$border
|
hsl(0, 0%, 86%)
|
$file-name-border-style
|
string
|
solid
|
|
$file-name-border-width
|
size
|
1px 1px 1px 0
|
|
$file-name-max-width
|
size
|
16em
|
|