jQuery PlugIn which makes easy to stylize with CSS the file inputs at your forms.


Customizing the HTML file input elements (<input type="file" />) is a time-consuming task which doesn't result the same way on different browsers. NiceFileInput makes things easy and transforms the file inputs on 3 different HTML elements (a text input, a button and a div container) which you can style with CSS the way you'll do it normally.

NiceFileInput.js is a script based on the previous work of Shaun Inman, who defined the concept behind NiceFileInput ( Styling File Inputs with CSS and the DOM ) and Mika Tuupola, who implemented nicely the idea in a jQuery plugin in some different way ( FileStyle ), so most of this plugin credit goes for them.

NiceFileInput degrades gracefully, if the user has no javascript enabled on the browser, a regular <input type="file" /> element will be there.


NiceFileInput requires the jQuery library, available at the JQuery website or through the Google CDN's Content Distribution Network Google Libraries API @ Google Code.

How to use it

  1. First, make sure you link the jQuery library and the NiceFileInput plugin to your Web page.

    • By using your local copy of jQuery:

      <script type="text/javascript" src="/your_path/jquery.min.js"></script>
      <script type="text/javascript" src="/your_path/jquery.nicefileinput.min.js"></script>
    • Or using the Google CDN's

      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src="/your_path/jquery.nicefileinput.min.js"></script>
  2. Insert the code which triggers the plugin on the jQuery Elements you want to apply it.

    <script type="text/javascript">
    /* <![CDATA[ */
          // your code...
    /* ]]> */

    You may optionally set the defult label text:

      label : 'Examinar...' // Spanish label

Customize the input file with CSS

You can fully customize the look and feel of your file input in two ways: