DEV Community

Cover image for Custom file upload button
Derek Oware
Derek Oware

Posted on

Custom file upload button

Customizing the input type="file" is a bit annoying because it comes with a button and an unchangeable text.

With the ::file-selector-button pseudo-selector you can edit the default button. It's still annoying because some CSS properties affect both the button and the text and some affect only the button 馃槖.

Another caveat is browser support. All major browsers except Firefox support the pseudo-selector.

You can read about the ::file-selector-button for more details.

How to customize the default upload button

We have our html input tag:

<input id="upload" type="file" accept="image/*" />
Enter fullscreen mode Exit fullscreen mode

Then in our css:

input::-webkit-file-upload-button {
  background-color: peru;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px 1px #454545;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Note that I used -webkit-file-upload-button instead of file-selector-button. -webkit-file-upload-button is for Webkit/Blink browsers like Chrome and Opera.

It's up to you if you wanna keep the "No file chosen" text. In this case, I don't wanna keep it. I'm not sure if it can be removed completely but adding position: absolute; puts the text behind the button.

Yayyy!!! 馃帀馃帀馃帀 Now we have our completely customized upload button.

Check out the full code on codepen.io. or clone the git repo

Discussion (1)

Collapse
zoedreams profile image
鈽笍鉁濓笍鈽笍馃晧鈽革笍鉁★笍鈽笍

nice, been wondering how to do that, thank you for sharing.