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.

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.

The Markup

<label class="cabinet">
    <input type="file" class="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.)
The 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.)
The JavaScript

First include the SI.Files library. Simple enough:

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

Source: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Related Listings:

1. Styling inputs with Css and Dom File inputs (< input type= "file" />) are the bane...
2. Multiple File Upload – JQuery The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin...
3. Ajax File Upload using JQuery Script that simplifies how you traverse HTML documents, handle events, perform...
4. uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
5. eXtplorer PHP and JS File Manager eXtplorer is a web-based File Manager. You can use it...

Do you like this post?

Email: