قالب ووردبريس
تصميم جديد
media
خبر جديد وحصر للموقع الان
April 10, 2018
April 14, 2018
أخر الاخبار
media
خبر جديد وحصر للموقع الان
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:
