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:







القوالب المتاحة

Joo - Niche Multi-Purpose HTML Template
إبداعى 01
View more
Joo - Niche Multi-Purpose HTML Template
شركات 01
View more
Joo - Niche Multi-Purpose HTML Template
مطعم برجر
View more
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template
شركات 02
View more
Joo - Niche Multi-Purpose HTML Template
صالون حلاقة
View more
Joo - Niche Multi-Purpose HTML Template مفعل
شركة شحن
Joo - Niche Multi-Purpose HTML Template
مطعم 01
View more
Joo - Niche Multi-Purpose HTML Template
منظم حفلات
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن 02
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 02
View more
Joo - Niche Multi-Purpose HTML Template
فساتين الزفاف
View more
Joo - Niche Multi-Purpose HTML Template
تحت الإنشاء
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 03
View more