Normally browsers do not allow to style file inputs. File Style plug-in shows a solution to fix the problem. This Plug-in uses jquery with css which enables the users to use image as browse button and style filename field as normal text field using CSS.

This Source of this post is from appelsiini

How does it work?

Plug-in 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.

How to use?

Insert the jquery and filestyle js files to the header section of html

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

The button image used in the code is here.

The java script code for styling the file input is as follows.

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

You can view the demo of the plug-in from here
Download the javascript file from here.

Posted in: Css : Jquery : Tips & Tricks

Tags: Css | Jquery | Tips & Tricks

One Response to “Styling File Inputs using CSS and jquery”