How to add css styles to input type file upload in html

In Html forms, Input type=file button allows us to upload the documents from web pages. The look of upload button behaves differently in different browsers.

Styling this upload button is tedious task, This post covers the applying the styles for upload button in CSS/Javascript. There are other file upload widgets available in Bootstrap, This tutorial only tells about custom css styles.

In html, File widget can be created using below snippet of code

  <input type="file" name="uploadBtn">

And default looks as seen below

When user selected the file from page, The UI contains text box with selected file name

It is not easy to change styles like a other input controls

To style this widget, We have to couple of things

• Styling input box
• Styling input button
• Input box hidden when file is selected

Adding label to style upload button

First, Add label element for input file element

<label id="uploadLabel">
</label>

Input file element is placed inside label

<label class="uploadLabel">
    <input type="file" class="uploadButton"/>
    Upload
</label>

with css styles, hide input file using display:none.

.uploadButton{
  display:none;
}

Now, change label with custom styles border radius,background color and border is applied with pure css

.uploadLabel {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 7px 15px;
  cursor: pointer;
  border-radius: 5px;
  background-color: blue;
  color: #ffffff;
}

Output:

How to add font awesome icon to upload button

Here is file upload - fa-file-upload from font awesome icon being used for this example

<i class="fas fa-file-upload"></i>

Added upload icon inside label

<label class="uploadLabel">
      <i class="fas fa-file-upload"></i> 

    <input type="file" class="uploadButton"/>
    Upload
</label>

.uploadButton {
  display: none;
}
.uploadLabel {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 7px 15px;
  cursor: pointer;
  border-radius: 5px;
}

Code pen example

Here is an complete example to custom style upload button with pure css/html and javascript is not required.