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 |