Skip to navigationSkip to content
Custom file upload button

Custom file upload button

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

With the 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/*" />

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; }

Note that I used instead of . 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 puts the text behind the button.

Yayyy!!! 🎉🎉🎉 Now we have our completely customized upload button.

{% codepen https://codepen.io/gameshaker/pen/rNLBxZQ %}

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