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 the 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, 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 user selected the file from page, The UI contains text box with 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 label element for input file element

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

Input file element places 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 apply 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.