Skip to content
Style and customize file input tag in your own way with example.
CSS HTML JavaScript
Branch: master
Clone or download
Latest commit c381306 May 4, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information. Update May 3, 2017
custom-file-input.js Create custom-file-input.js May 3, 2017
customfileInput.html Create customfileInput.html May 3, 2017
demo.css Create demo.css May 3, 2017
jquery-v1.min.js Add files via upload May 3, 2017


There are quite a few techniques for “customizing” the element. I tried most of them, but none was good enough.

As as result, I tried googling for an unseen solution. Once it seemed that there was nothing new, my eyes were caught by a comment on StackOverflow. It had just a few upvotes and was lost somewhere in the middle of the page, but most importantly it contained a magic word – ! 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.

Checkout the Article on www.mrShishir.ME/style-and-customize-file-input-tag-in-your-own-way-with-example

You can’t perform that action at this time.