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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md 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
jquery.custom-file-input.js

README.md

CustomFileInput

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.