Adding Style to a File Upload Button

File upload buttons are notoriously difficult to style – browsers always want to use their own style for this button. However, to keep a site’s style consistent, it is necessary to style event file input types. I found a great solution using jquery and css:

jquery:
<script type="text/JavaScript">

$(window).load(function () {
    var intervalFunc = function () {
        $('#file_name').html($('#file_upload').val());
    };
    $('#file_click').on('click', function () { // use .live() for older versions of jQuery
        $('#file_upload').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

</script>

html:
<!-- display file name(s) to the user -->
<p id="file_name"></p>


<!-- hidden from the user's view -->
<input style="display:none" id="file_upload" type="file" size="4" name="files[]" multiple/>


<!-- image viewed by the user -->
<input id="file_click" type="button" class="button" value="Browse for Files"/>

css:

<style>

.button
{
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	font-size: 14px;
	color: #494D54;
	background: #B3BECC;
	background: -moz-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#CED9EA),color-stop(100%,#B3BECC));
	background: -webkit-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -o-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -ms-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CED9EA',endColorstr='#B3BECC',GradientType=0);
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #808080;
	cursor: pointer; 
	cursor: hand;
}

</style>