Cambiar el aspecto del input file con CSS y JavaScript

Con este codigo podemos personalizar el boton de los input file, para que podamos subir archivos y tener un aspecto mas acorde a nuestro diseño.

	var SITE = SITE || {};
	SITE.fileInputs = function() {
	var $this = $(this),
	$val = $this.val(),
	valArray = $val.split('\\'),
	newVal = valArray[valArray.length-1],
	$button = $this.siblings('.button'),
	$fakeFile = $this.siblings('.file-holder');
	if(newVal !== '') {
	$button.text('Photo Chosen');
	if($fakeFile.length === 0) {
	$button.after('<span class="file-holder">' + newVal + '</span>');
	} else {
	$fakeFile.text(newVal);
	}
	}
	};
	$(document).ready(function() {
	$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
	});

view raw Fancy File Inputs.js hosted with ❤ by GitHub

	<span class="file-wrapper">
	<input type="file" name="photo" id="photo" />
	<span class="button">Choose a Photo</span>
	</span>

view raw Markup.htm hosted with ❤ by GitHub

	.file-wrapper {
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	position: relative;
	}
	.file-wrapper input {
	cursor: pointer;
	font-size: 100px;
	height: 100%;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
	position: absolute;
	right: 0;
	top: 0;
	}
	.file-wrapper .button {
	background: #79130e;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	margin-right: 5px;
	padding: 4px 18px;
	text-transform: uppercase;
	}

view raw Style.css hosted with ❤ by GitHub