NiceFileInput.js

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

About

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.

Requirements

NiceFileInput requires the jQuery library, available at the JQuery website jQuery.com 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></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[ */
        $(document).ready(function(){
          // your code...
          $("input[type=file]").nicefileinput();
        });
    /* ]]> */
    </script>
    

    You may optionally set the defult label text:

    $("input[type=file]").nicefileinput({
      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:

Examples
Download

Share This!