You can find amazing tools for improving web forms, ranging from UI kits to advanced jQuery plugins.
But one of the toughest input fields to edit is the upload field. This is a default HTML input element and it lets users upload files from their computer. Restyling the upload field is a massive challenge compared to other form elements.
If you’re hoping to customize your upload inputs, this gallery will help. I’ve collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.
1. Flat File Upload
You can add this file upload design onto any page and get it looking great. All you’ll have to do is change up the color scheme and position it properly within your form.
It works just as you’d expect and it runs on the standard HTML input element. So this is also usable with older browsers and should work on mobile, too.
2. Custom File Upload
Here’s a design that gets a little more abstract with the upload field. Developer Aaron Vanston created this file upload as a replica of the ones we see on larger websites.
Think about big tech sites like Dropbox, Google+ and Facebook. They often have a drag and drop area with a big “click here” space to launch the upload window. That’s exactly what Aaron did with this snippet.
It does rely on jQuery and a good amount of JS/CSS to work. And while it does use the standard HTML input field, it also handles the uploading process with custom JS functions.
3. Responsive Animated Uploader
If you do any sort of modern web design, then you know you have to go responsive. Mobile users may upload files to the web through these same forms, so utilizing a responsive input field is a great idea.
Take a look at this design for an example of a quality mobile-friendly upload field. It’s very basic, with just a small square upload space with drag & drop support.
Just note this does not use the input element – so there’s no way to click for uploading. I think that’s a usability nightmare, but this is also just a sample snippet used for testing – so it’s not geared towards perfect usability.
If you do bring this snippet into your site, it’s recommended that you add a typical upload field alongside the drag & drop area.
4. Custom Uploader
Daily dev projects are a great way to sharpen your skills. Drew Vosburg followed this approach to build a sweet upload form hosted freely on CodePen.
The clickable area is an HTML label styled with CSS. That label element is attached to the input field, which is hidden off the page. It works just like a clickable field. Definitely a smart idea and it’s fully semantic to boot.
5. Stock Photo Upload Interface
Here’s one of the most complex, yet impressive snippets I’ve seen on CodePen. It lets you upload photos into a gallery right from your computer. With each photo you upload, it’ll show you a preview right on the page.
Whenever you upload images to a server, they’ll generate a temporary file. On your own server, you can use this temporary file to display the picture. But now that CSS supports base64, this is another alternative.
The interface is super-clean and the upload feature blends right in.
6. Simple Blue Upload UI
If you’re looking for a JS-free upload field then have a look at this example, created by Stephen Baker.
It uses pure CSS3 to change the input style into one large button. It works with the Font Awesome upload icon and simply wraps a whole circular area around the upload field.
You can change the style, color, icon or anything else to get this matching your site. It’s basically a super-clean alternative to the default input style and it runs on pure CSS3.
7. jQuery Custom File Upload Input
Through these styles you can change the upload field text, size, button color or remove the text field to just use a single button.
Note that this does require a good amount of jQuery because most of these features cannot be altered with CSS. If you don’t mind working with jQuery, these options are phenomenal.
8. Flat UI Input File
Since this is a sample snippet, you can’t actually upload files anywhere. But, that’s easy enough to change if you move this into your own site. The core design and setup is really what gives this snippet some life.
Best of all, these codes work in browsers dating back to IE 8! So it’s a pretty solid option if you’re concerned about accessibility.
9. Multi-Upload Fields
Here’s one final custom field with a twist: it looks pretty simple aesthetically – but the real prize is in the functionality.
This upload field was designed to support multiple files all at once. You don’t typically see this with input fields – or at least not by default. Users have to select multiple files in the same window and the backend needs to support that.