Custom File Upload Button With Pure CSS

Browsers don’t want us to customize file inputs but we do. There is simple trick to do this with pure CSS without any library or framework.

The Default File Input

Despite the simplicity and purity there are a lot of inconvenience when using a file input:

  • It uses the language of the browser not the language we want
  • It is impossible to make it look like we want
  • Its look depends on the user’s OS and browser

The code:

Rendered in the browser:

Demo: http://codepen.io/adambene/pen/BQrdYq

Customize With Pure CSS and Some Hack

There is a hacky way to implement a customized file input. It breaks down into the followings:

  • create a wrapper with relative positioning and hidden overflows
  • create a button with any design
  • create a large floating file input with zero opacity to capture clicks

Demo: http://codepen.io/adambene/pen/xRWrXN

Browser Compatibility

It’s quite a minimalist solution to a simple problem. It works in any browser. However if we target older IE versions, we should use a filter to achieve zero opacity.

HTML5

We can enhance user experience with some really simple and nice attributes: multiple, required, accept.

More

When the requirements get more complex like uploading multiple files or a folder, showing previews etc. it is encouraged to use some more sophisticated solutions. They usually use flash fallbacks for the file dialog and XHR2 so they can support rich features even in ancient browsers.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store