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

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.

input type file upload css styles

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

input type file upload CSS styles

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:

css upload styles input file

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.

See the Pen