File inputs (< input type= "file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
Before we get down to the nitty gritty details, check out the demo or, if you’re a Mint user, check out your settings page in the Mint Account Center (requires login).

<label class="cabinet">
    <input class="file" type="file" />
</label>

The file input is given a class of file and wrapped in an element with a class of cabinet. (The type of wrapper element and actual class names are not set in stone and can be changed via properties of the SI.Files object to avoid conflicts as necessary.)

CSS:

.SI-FILES-STYLIZED label.cabinet
{
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

The first three properties of the wrapper element style should be changed to reflect the width, height and url of your custom button image. Everything else can be left alone. (Different buttons can be used for different file inputs by adding an additional class to the wrapper element and styling accordingly.)

Javascript:

<script src="/path/to/si.files.js" type="text/javascript"></script>

Then, either in your onload event handler or at some point after your file inputs appear in the source, call:

SI.Files.stylizeAll();

The library also offers two alternate methods of styling file inputs. Given an element id:

SI.Files.stylizeById(‘input-id’);

Or given an element node:

SI.Files.stylize(HTMLInputNode);

Both alternates are useful when the form that contains your file input is loaded via Ajax.
How it works

We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match.

Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that can’t be achieved with display: none; or visibility: hidden;).

Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.

Related Listings:

1. New Styling buttons with CSS Particle Tree recently posted an article describing a technique for...
2. Awesome Form Script Using simple and semantic HTML, this method uses comprehensive CSS...
3. Tag Clouds – Styling and Adding Sort Options Users have very different opinions when it comes to tag...
4. Uni-Form Script ni-Form is an attempt to standardize form markup (xhtml) and...
5. Horizontal Pictures Movements with Mouse After writing tutorial on Move Div – Images Vertically with...

Do you like this post?

Email: