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:

  • .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 

                    

                        
                        <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:





Full Documentation


Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template
Barber Shop
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template active
Restaurant 01
Joo - Niche Multi-Purpose HTML Template
Wedding Planner
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo 02
View more
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template
Bridal Dresses
View more
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more