Input File Text Demo

Why do I need this plugin?

The appearance of an input file element is browser dependant.

In Chrome

In FireFox

In Internet Explorer

This plugin's purpose is to 'over-ride' the default appearance with our own.

How to use

1. Download this plugin.
2. Add this script after JQuery.

   
                       <script src='jquery-input-file-text.js'></script>
                   

3. Create an input file element.

   
                       <input type="file" id="choose-file" />
                   

4. Apply this plugin on the input file element.

   
                       $(document).ready(function() {
                           $('#choose-file').inputFileText({
                               text: 'Select File',
                               buttonClass: 'button-class',
                               textClass: 'text-class'
                           });
                       });
                   

   Result