Style input type=file

This will replace the default file input with a normal text field and button, both of which can be styled via CSS with ease.

by Evan Sharp

HTML

<input type="file" />

CSS

.fake-file{
    position:absolute;
    top:0;
    left:0;
}
.file-wrap{
    display:inline-block;
    position:relative;
    zoom:1;
}
.styled-file{
    position: relative;
	text-align: right;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

JavaScript

$.widget("eb.styleFile",{
    _create: function(){
        var $this = this,
            element = $this.element.on("change mouseout",function(){$this.update();}).addClass("styled-file");
        $this.fake = {};
        $this.fake.text = $("<input />").attr({type:"text"});
        $this.fake.button = $("<button />").text("Browse");
        $this.fake.field = $("<div />").addClass("fake-file").append($this.fake.text,$this.fake.button);
        element.wrap($("<span />").addClass("file-wrap")).before($this.fake.field);
    },
    _destroy: function(){
        this.fake.field.remove();
        this.element.unbind("change mouseout").unwrap();
    },
    update: function(){
        this.fake.text.val(this.element.val());
    }
});
$("input[type=file]").styleFile();