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.