Custom file upload

Styling a file input field. Works in IE7+ and of course in all other browsers. Additional styling may be needed. Based on quirksmodes article: http://www.quirksmode.org/dom/inputfile.html

by nobuts

HTML

<div class="custom-upload">
    <input type="file">
    <div class="fake-file">
        <input disabled="disabled" >
    </div>
</div>

CSS

.custom-upload {
    position: relative;
    height: 40px;
    width: 350px;
    margin:30px;
}

.custom-upload input[type=file]
{
    outline:none;
    position: relative;
    text-align: right;    
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width:100%;
    height:100%;
    
}

.custom-upload .fake-file
{
    background:url(https://www.fold3.com/i/upload-icon.png) center right no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 100%;
}

.custom-upload .fake-file input
{
    font-size:16px;
    height:40px;
    width:300px;
}

JavaScript

$('.custom-upload input[type=file]').change(function(){
    $(this).next().find('input').val($(this).val());
});