Styling the File Input

Introduction

Everyone wants a nice design for their image upload system and CSS alone is not capable of being able to use images for your file input unlike you can with buttons and text fields for the fact the file input lacks css styling. Web Development over time is getting better, but as old as CSS and HTML are, they are still fairly new to the beginner developers and still today being developed to become a better markup language.

Why Develop File Inputs?

Many reasons people develop web designs for file inputs. One major reason is to make their website look less dull by not using the browsers default preset images. Each browser has a different style for displaying file inputs and buttons and using this method will help your site look consistently the same throughout each browser, which is a plus for your website.

Developer Requirements

You must know the following:

Basic Javascript and Basic JQuery
Basic CSS
Basic XHTML/HTML

If you haven’t learned any of the following languages please read my “Where does web development go from here” article or check out the resources at the bottom of this article.

“Its so easy a caveman can do it!”

Really?

Yes really. After reading a bunch of complicated articles, I remembered there we’re some very unique JavaScript libraries out there that makes web developing a whole lot easier. First thing that came to mind was “JQuery”. So I did some research on if there were any plug ins for this library and what do you know? A File Style plug in just for designing file inputs, without any hassle.

How do I use it?

First off you need to download JQuery and File Style Plugin (Tip: File->Save as in order to DL the plugin)
Next include it in your html page like so: ( Example )

Now we want to add file input to the page, put it anywhere between the body tags:

So now we should see a basic file input we need to get a “Browse File” image, I’ll use the one they added on the demo site:

Now we need to add the following jquery under the form we just added:

$("input[type=file]").filestyle({
    image: "http://letstalkdev.com/wp-content/uploads/2008/04/choose-file.gif",
    imageheight : 22,
    imagewidth : 82,
    width : 250
});

What does it all mean?

Well thats the simple part :).

The following is a jquery wrapper that gets every file input and goes into a looping state so the rest of the code can work and switch through and use your custom browse image:

$("input[type=file]").filestyle({
   //code here
});

This part is pretty simple I’ll go step by step

First off we use the following to link to your custom image:

image: "http://letstalkdev.com/wp-content/uploads/2008/04/choose-file.gif",

Next we set the image height:

imageheight : 22,

After that we set the images width:

imagewidth : 82,

And last but not least we set how long we want our file input to be:

width : 250

Final Outcome: Live Example

Resources

Leave a comment