Style File Inputs With jQuery (and CSS)

Blog Projects
javascript jquery
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Frontend coders have a life lasting problem. How to explain art director file inputs can not be styled? File Style to the rescue! It is a jQuery plugin which enable you to do just that. Style file inputs.

Code is inspired by work of Shaun Inman with one main difference. This version mimics vanilla file input by showing what file user has chosen.

How does it work?

Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

Usage

Give filename of button image file together with its dimensions. Optionally you can also set width of input.

 $("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
 });

File Style is still considered beta. There might be small changes in usage in near future.

Download

Before downloading check demo page. Code available as three flavours: source, minified and packed.



When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

© 2013 Mika Tuupola.