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

In Html forms, the 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 a tedious task, It covers applying the styles for the upload button in CSS/Javascript. There are other file upload widgets available in Bootstrap, but the tutorial only tells about custom CSS styles.

In HTML, a File widget can be created using the below snippet of code.

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

And default looks as seen below.

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

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

To style this widget, We have to do a couple of things.

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

Adding label to style upload button

First, Add a label element for the input file element

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

The input file element is placed inside the 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 the label with custom styles border-radius, background color, and the border 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 the font awesome icon 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 a complete example of a custom-style upload button with pure CSS/HTML and javascript is not required.