article
Control Your Own Level of Motivation
April 10, 2018
April 14, 2018
-
- shopping cart
-
UI Designs
x2
$11.99 $23.98 -
Mockups
x3
$11.99 $23.98
-
recent news
article
Control Your Own Level of Motivation
form
The indispensable form controls
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:
Niche Templates
Creative 01
View more
Corporate 01
Burger Restaurant
View more
Wedding
View more
Corporate 02
View more
Barber Shop
View more
Logistics Cargo
View more
Restaurant 01
View more
Wedding Planner
View more
Logistics Cargo 02
View more
Creative 02
View more
Bridal Dresses
View more
Coming Soon
View more