I have this rough example that you might want to get some idea...

html​

<div id="file">Chose file</div><input type="file" name="file" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#file {    display:none;}​

jQuery

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});var fileInput = $(':file').wrap(wrapper);fileInput.change(function(){    $this = $(this);    $('#file').text($this.val());})$('#file').click(function(){    fileInput.click();}).show();

demo

​​​​​​​​​​​​​​

After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).

<div style="position:relative;"><div id="file" style="position:absolute;">Click here to select a file</div><input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;"></div>

Then you can of course style the "file" div as you want.

And if you want to use a type="text" input instead of a div, simply change innerHTML for value:

<div style="position:relative;"><input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file"><input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;"></div>

Here is my original answer using jQuery:

<div style="position:relative;"><div id="file" style="position:absolute;">Click here to select a file</div><input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());"></div>

I made a custom style for this as well. Check it out

JS Fiddle Demo - Custom Input type="file"

HTML

<input type="file" id="test"><div class="button-group"> <a href="#" id="browse" class="button primary">Browse</a><a href="#" id="save" class="button">Save</a><a href="#" id="clear" class="button danger">Clear</a></div><input type="text" id="testfile"></input>

CSS

body {padding:100px;}input[type="file"] {position:absolute;display:none;}#testfile {height: 26px;text-decoration: none;background-color: #eee;border:1px solid #ccc;border-radius:3px;float:left;margin-right:5px;overflow:hidden;text-overflow:ellipsis;color:#aaa;text-indent:5px;}#actionbtnBrowse, #actionbtnSave {margin:0 !important;width:60px;}

JQuery

$("#browse").click(function () {$("#test").click();})$("#save").click(function () {alert('Run a save function');})$("#clear").click(function () {$('#testfile').val('');})$('#test').change(function () {$('#testfile').val($(this).val());})

Also add to external resources tab:

https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css