Styling File Inputs with CSS and the Dom

styling-file-inputs-with-css-and-the-dom

styling file inputs with css and the dom

File inputs (input type=”file” ) do not look good on beautiful form/html design. But you can hide on your design and keep beautiful html design. Recently i had to devlop a site with out file inputs but user must be able to upload file. i found many developers use flash or use complex JavaScript to do this but I found a easy solution HERE. I will show how you can keep the functionality of file input without using a lot of JS code or Flash.

First let develop the html. Here is the code

<label class="lable_holder">
    <input class="file_upload" type="file" />
</label>

The file input is given a class of file_upload and wrapped in an element with a class of lable_holder.

Now the CSS

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

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

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

Now You add Javascript file to your html

<script src="/path/to/si.files.js" type="text/javascript"><!--mce:0--></script>

Now you can call either in your onload event handler or at some point after your file inputs appear in the source

SI.Files.stylizeAll();

or

SI.Files.stylizeById('input-id');

This solution is known to work in:

IE 5.5+
Firefox 1.5+
Safari 2+

It is known to degrade gracefully in:

Opera
IE 5.01

You can download JS file from HERE

About Zakir Hyder

This entry was written by .

05. April 2011 by Zakir Hyder
Categories: CSS, DOM, HTML, JavaScript, Web Development | Comments

Comments

  1. Jasmine Hegman says:

    Thought I’d let you know the JS download link is broken.

  2. Zakir Hyder says:

    Link is update. Thanks for letting me know.