Styling & Customizing File Inputs the Smart Way

A tutorial on how to style and customize <input type="file"> in a semantic, accessible way using the <label> element and some JavaScript.

CustomFileInputs

View demo Download source

There are quite a few techniques for “customizing” the <input type="file" /> element. I tried most of them, but none was good enough to have on Readerrr (for importing feeds by uploading a file). Probably the worst technique was the one where the input element is put into a container (which imitates a button), and the input follows the cursor so that when you click anywhere on the container, you actually click the input. Sounds interesting and weird at the same time, right? Anyway, it had some unacceptable drawbacks (usability, touch).

As as result, I tried googling for an unseen solution. Once it seemed that there was nothing new, my I eyes were caught by a comment on StackOverflow. It had just a few up votes and was lost somewhere in the middle of the page, but most importantly it contained a magic word – <label>! As you may know, pressing a label basically triggers the focus event for the bound input. Interesting thing is that, if it is a file input, it works out as a click event, resulting in opening a file browser. This is great for crafting a semantic solution.

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

So, pressing any of these two elements gives us the same result. That means that the most difficult part is… solved! No JavaScript, no other complex solutions like cursor position tracking, just these two lines. See for yourself:

Now let’s just style it and make this look like a normal button.

Hiding the <input>

First off, we need to hide the ugly duckling. CSS properties such as display: none or visibility: hidden will not work out. The reasons are: the input value will not be sent to the server on form submit; the input will be excluded out of tab order (you want your website to be accessible, right?). I set up a combination of CSS properties/values for hiding the input visually but keeping it visible for the browser:

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

I see you are wondering why width and height are set to 0.1px instead of just 0px. Setting the property values to zero ends up throwing the element out of tab party in some browsers. And position: absolute guarantees the element does not interfere with the sibling elements.

Styling the <label>

Since the <label> element is visually the button, you can use all of your creative CSS juices on it. I’m sticking to something very simple for now:

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

Accessibility

How do you know that an element on the website is pressable? Firstly, the element should communicate a feeling that you can tap or click on it. Secondly, the cursor icon should change to an appropriate one when hovering the element. The former we’ve solved previously, let’s solve the latter, because labels do not trigger a cursor change by default:

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

Keyboard Navigation

If users are unable to navigate on your website using just a keyboard, you are doing something wrong. Hiding the input itself in a correct manner was one thing, the other is indicating when the element is focused, i.e. rendering .inputfile:focus on the label:

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

-webkit-focus-ring-color auto 5px is a little trick for obtaining default outline looks on Chrome, Opera and Safari. The style in the line above is for browsers that do not understand the -webkit… expression.

Possible Touch Issues

In case you’ve been using FastClick (a library for eliminating the 300ms tap-pause on touch-capable devices) and have plans to add some extra markup to the content of a label, the button won’t work as it should, unless you use pointer-events: none, respectively:

<label for="file"><strong>Choose a file</strong></label>
.inputfile + label * {
	pointer-events: none;
}

JavaScript Enhancement

Probably and hopefully the last thing missing is indicating if files were selected. The file input does usually indicate that, but in our case the input is visually hidden. Luckily, there is a way out: a tiny JavaScript enhancement. The text of a label becomes the name of the selected file. If there were multiple files selected, the text will tell us how many of them were selected.

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
	var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;

	input.addEventListener( 'change', function( e )
	{
		var fileName = '';
		if( this.files && this.files.length > 1 )
			fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
		else
			fileName = e.target.value.split( '\\' ).pop();

		if( fileName )
			label.querySelector( 'span' ).innerHTML = fileName;
		else
			label.innerHTML = labelVal;
	});
});

There is also a jQuery version of this code presented in the source of the demo files. Make sure to check them out.

A little explanation:

  • Having the native [multiple] attribute allows users to select more than one file per upload. Whereas [data-multiple-caption] is a fictive attribute for expressing the message if multiple files were selected. Here you can set a custom message. The use of the {count} phrase is optional and the fragment is replaced with the number of files selected. The reason I use an additional HTML attribute instead of assigning this sentence as a value for a JavaScript variable is because it’s much easier to maintain the copy when it is in one place.
  • HTML attribute [multiple] is not supported in IE 9 and below and neither is the files property of JavaScript. For the latter case, we simply rely on value. Since it usually has a value of C:\fakepath\filename.jpg format, the split( '\\' ).pop() extracts what’s actual – the name of the file.
  • An interesting thing is that you can unset a value of the input by pressing the ESC button while in the file browser. This is possible only in Chrome and Opera. Therefore, we use labelVal for storing the default value of the label and bringing it back when necessary.

This is how the final result looks like:

What if JavaScript is not available?

Since there is no JavaScript-less way to indicate if any files were selected, it would be better to rely on the default looks of the file input for the sake of usability. All we need to do is to add a .no-js class name to the <html> element and then use JavaScript and replace it with .js – that’s how we will know if JavaScript is available.

<html class="no-js">
    <head>
        <!-- remove this if you use Modernizr -->
        <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
    </head>
</html>

The CSS part accordingly:

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.no-js .inputfile + label {
    display: none;
}

Firefox Bug

It is quite unexpected that Firefox completely ignores the input[type="file"]:focus expression, whereas :hover and :active work just fine! Surprisingly, Firefox allows to catch the focus event in JavaScript, so the workaround is adding a class to the file input element that let’s us control the focus style:

input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

Check out the example styles in the demo to see how to style the file input element according to your needs. Make sure to take a look at the source code of the demo and feel free to use this technique in your projects. Happy uploading!

The icon in the demo is made by Daniel Bruce from www.flaticon.com and it is licensed under CC BY 3.0.

View demo Download source

Previous:
Next:

Tagged with:

Osvaldas is a web designer who thinks in code and a creator of Readerrr. Osvaldas is based in Klaipeda, Lithuania.

View all contributions by

Website: http://osvaldas.info

Related Articles

Feedback 57

  1. 1

    Very nice tutorial. Solved the problem of how to display file uploaded with a very nice file upload button. The only thing I changed was to get rid of the “color” and “background-color” settings for “body” in demo.css. They didn’t blend in with my website. Thanks.

    • 5

      Edit(2): It seems that the span element is a code remainder.

      label.innerHTML = fileName ? fileName : labelVal; //is a working replacement for line 15-18

  2. 7

    Excellent article, just saved me a lot of time and gave me an awesome file upload widget!! Thanks =)

  3. 8

    This is awesome thank you!

    Is there a way I can get your code to work for inputs that I create programmatically after the page has loaded?

    Many Thanks

  4. 9

    I keep getting the following:
    Uncaught TypeError: Cannot read property ‘innerHTML’ of null

  5. 11

    This was great, but within a form if I make this a required field I’m no longer able to see a validation message if a file isn’t selected. How do I make the validation message show up?

    • 12

      Hey Anon,
      Just wondering if you landed on a solution to the issue of validation.

  6. 13

    Hi,

    This looks interesting!

    I stumbled on this while I was looking for a solution to fix form validation if the file is chosen via Drag-n-drop way.

    So far, I do not see any workaround except to change my validation logic.

    Do you see any “smart” way to fix that too?

    Anyway, it was a really clever way.

  7. 14

    Great tutorial, everything is simple and straight-forward. I must be missing a step…or either there is a conflict with my wordpress theme and/or plugins, but I can’t get the filename to show up when I select files. It still has the placeholder text. Any suggestions?

    • 15

      Add span inside the label as shown below;

      Choose a file

      ******Then, right at the bottom of the body(still inside it), put your javascript code there. Sometimes, scripts work when placed at the bottom not top of the html file. (Keep that in mind). Script shown below just in case:******

      var inputs = document.querySelectorAll( ‘.inputfile’ );
      Array.prototype.forEach.call( inputs, function( input )
      {
      var label = input.nextElementSibling,
      labelVal = label.innerHTML;

      input.addEventListener( ‘change’, function( e )
      {
      var fileName = ”;
      if( this.files && this.files.length > 1 )
      fileName = ( this.getAttribute( ‘data-multiple-caption’ ) || ” ).replace( ‘{count}’, this.files.length );
      else
      fileName = e.target.value.split( ‘\\’ ).pop();

      if( fileName )
      label.querySelector( ‘span’ ).innerHTML = fileName;
      else
      label.innerHTML = labelVal;
      });
      });

    • 16

      ******Edit: Add span to label(inside the label to be precise)***** Sorry Good luck!

  8. 19

    Hello,
    I have an accordion that has more than one forms on a single page. I want to implement this, but it does not work as it should. The selected files are only displayed in the first such custom field. Can someone help with this?

  9. 21

    Hello. This is a great tutorial. Wonderful website to learn tricks. I was customizing my forrm with Contact Form 7 in WordPress. And I have a question: How can I receive the file uploaded to my email. That is all. thank you in advance.

  10. 26

    Has anyone experienced issues with file uploads from mobile or tablet? The file is apparently added, but the upload is empty. This happens both on iOS and Android.

    Other than that, great file upload solution.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>