CSS: Personaliza el botón de subir archivos

Un diseño currado atrae clientes y si una web vende todos ganan: el diseñador web y el cliente. En este artículo te propongo como personalizar el botón de subir archivos en una página web también conocido como input file. Conseguirás un diseño atractivo para este botón y otra cosa importante, lo podrás personalizar.

Código html clásico de subir archivos

Empecemos por el código html que verás en cualquier página web que tenga la posibilidad de subir archivos en el formulario:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Esconder la etiqueta <input>

Cuando se quiere esconder un elemento lo normal es utilizar en el código css los atributos display:none o visibility: hidden, pero en este caso si utilizas esto, no funcionará al tener que enviarse por medio del formulario. Hay una alternativa y es utilizar una combinación de atributos css para indicar lo mismo:

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

Estilos CSS para <label>

Creamos los estilos css para la etiqueta <label>:

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

Añadiendo detalles

Si queremos que salga el icono de la mano cuando nos acerquemos al input tendremos que insertar más estilos css:

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

Para navegar con el teclado añadimos en el código css:

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

Javascript para subir múltiples archivos

En el código html iría el código:

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />

y el código javascript es el siguiente:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
	var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;

	input.addEventListener( 'change', function( e )
	{
		var fileName = '';
		if( this.files && this.files.length > 1 )
			fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
		else
			fileName = e.target.value.split( '\' ).pop();

		if( fileName )
			label.querySelector( 'span' ).innerHTML = fileName;
		else
			label.innerHTML = labelVal;
	});
});

Este es el resultado

Y esto es todo en líneas generales, puedes ver una demo de todas las opciones disponibles o ver un tutorial con todas las opciones (en inglés) y donde te puedes descargar todo el código fuente.