How to customize <input type="file">?

Question

Is it possible to change the appearance of <input type="file">?

Answer 1

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.

If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).

There is a great guide by Tympanus for styling this.