Styling and customizing file input browser the smart way.
Source Code
<input type="file" name="file-1[]" id="file-1" class="inputfile" data-multiple-caption="{count} files selected" multiple><label for="file-1" class="tx-white bg-info"> <i class="icon ion-ios-upload-outline tx-24"></i> <span>Choose a file...</span></label>Class Reference
| Class | Value |
|---|---|
class="tx-white bg-[value]" | primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark |
Source Code
<input type="file" name="file-2[]" id="file-2" class="inputfile" data-multiple-caption="{count} files selected" multiple><label for="file-2" class="if-outline if-outline-info"> <i class="icon ion-ios-upload-outline tx-24"></i> <span>Choose a file...</span></label>Class Reference
| Class | Value |
|---|---|
class="if-outline if-outline-[value]" | primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark |
Source Code
<input type="file" name="file-3[]" id="file-3" class="inputfile" data-multiple-caption="{count} files selected" multiple><label for="file-3" class="if-style-1 if-primary"> <div class="icon-wrapper"> <i class="icon ion-ios-upload-outline"></i> </div><!-- icon-wrapper --> <span>Choose a file</span></label>Class Reference
| Class | Value |
|---|---|
class="if-style-1 if-[value]" | primary | success | warning | danger | info | teal | indigo | purple | pink | orange | light | dark |