Style your file inputs with jQuery

Posted by jcargoo | Tuesday, November 25, 2008
| 0Delicious Twitter Reddit Digg Loading...

Demo here.

Unfortunately the browsers do not let you style file inputs. With File Style plugin you can do it!

The plugin allows you to style the filename field and use an image as browse button.

The image button is aligned with

file inputs browse button. In addition to this, the File input is hidden by setting opacity to zero. The example shown in the demo selects for instance the css class file_n and applies to it the main function filestyle (defined in jquery.filestyle.js) with providing the image location, the desired height/width of the image and the width of the textfield:
image: "choose-file.gif",
imageheight : 22,
imagewidth : 99,
width : 100
<input type="file" class="file_1" />
A CSS part is provided to customize your input elements.

How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

0 Previous Comments