• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo personalizar y dar estilo a un botón input file

personalizar input file

Un input file nos permite interactuar con el sistema operativo enviando ficheros desde nuestro ordenador al servidor remoto. Es decir, permite adjuntar archivos para luego poder ser enviados.

Sin duda es uno de los elementos que más descuidamos a la hora de diseñar. Solemos dejarlo en su diseño inicial bastante feo y donde cada navegador web lo interpreta de una forma diferente.

Con este tutorial vamos a aprender a personalizar este input, dándole un estilo más bonito, funcional en todos los navegadores, responsive y lo conseguiremos mediante un poco de CSS y JavaScript. Cuando seleccionemos un archivo, el botón input file mostrará el nombre del archivo seleccionado, también podremos seleccionar varios archivos a la vez mostrando el número de archivos que han sido seleccionados.

Podemos personalizar el input file en siete estilos diferentes, cambiando sus colores, los bordes, etc. a vuestro gusto. El resultado será el siguiente, podéis probarlos:

ESTILO 1


ESTILO 2


ESTILO 3


ESTILO 4


ESTILO 5


ESTILO 6


ESTILO 7


Para empezar descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos tres carpetas. Abrimos la carpeta js que contiene tres archivos. Copiamos y pegamos el archivo custom-file-input.js a nuestra carpeta js y hacemos un enlace a este archivo al final de la página donde vayamos a poner el input file justo antes de </body>. El archivo jquery.custom-file-input.js sólo lo pondremos si queremos utilizar la librería jQuery y el archivo jquery-v1.min.js sólo si tenemos una versión inferior de jQuery a este ya puesto en la página y entonces habría que sustituirlo. No hace falta poner estos dos últimos archivos para hacer funcionar estos estilos del input. A continuación un ejemplo de cómo ponerlo. Tener en cuenta que la ruta puede cambiar dependiendo de donde tengáis localizados los archivos.

<script src="js/custom-file-input.js"></script>

o

<script src="js/jquery.custom-file-input.js"></script>

y si hace falta

<script src="js/jquery-v1.min.js"></script>

Ahora abrimos la carpeta que dice css, copiamos todo lo que hay dentro del archivo file-input.css y lo pegamos dentro del archivo principal css de nuestro tema o simplemente copiamos y pegamos este archivo dentro de la carpeta css de nuestro tema o plantilla. Luego hay que indicar en la página donde ponemos el input file un enlace a este archivo en la parte de arriba dentro de la etiqueta <head>. Un ejemplo.

<link rel="stylesheet" href="css/nombre-archivo-principal.css">

o

<link rel="stylesheet" href="css/file-input.css">

Vamos a explicar como poner el input siguiendo el ejemplo del estilo 1. Una vez puestos los archivos anteriores, para que el input file quede personalizado, tenemos que poner el siguiente código, por ejemplo, dentro de un formulario.

<input type="file" name="file-1" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple />
<label for="file-1">
<svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>
<span class="iborrainputfile">Seleccionar archivo</span>
</label>

Dentro de los archivos que habéis descargado, hay una carpeta que se llama demo donde encontraréis dentro el código de los siete estilos.

Con sólo hacer esto ya lo tendréis personalizado. Recordar que este tutorial es sólo para dar estilo al botón input file, hacer funcionar un formulario y el archivo adjunto es otra historia diferente. En nuestra web utilizamos PHPMailer para hacer funcionar los formularios. En el formulario de comentarios que tenemos al final de este post, podéis inspeccionar el código fuente de nuestra página y ver como lo hemos puesto para que os hagáis una idea, pero sólo lo tenemos funcional para adjuntar un archivo y no multiples.

A partir de ahora, todo lo que vamos a explicar, es el código de esos archivos que hemos copiado y pegado, que tampoco es mucho, para que entendamos que hace cada cosa, así nos será más sencillo personalizarlo a nuestro gusto y aprenderemos que es lo importante.

INPUT FILE

En la primera línea del código señalamos el estilo de input que queremos realizar, habrá que cambiar el número según el estilo que utilicemos. Al final de la línea añadimos un código para que se pueda seleccionar más de un archivo y nos muestre el número de archivos seleccionados.

<input type="file" name="file-1" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple />

El código de la etiqueta <label> empieza señalando el estilo que vamos a utilizar. Seguidamente tenemos el icono en formato svg, también podemos poner un código de imagen con otro formato incluyendo el atributo class para que lo podamos personalizar y modificando el css. Podéis conseguir iconos de libre uso comercial en la página web de Flaticon. El final del código es un <span> con el texto del input. En el resto de estilos, muchos no utilizan esta misma estructura, mirarlo en el archivo que hay dentro de la carpeta demo.

<label for="file-1">
<svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>
<span class="iborrainputfile">Seleccionar archivo</span>
</label>

CSS

En primer lugar, tenemos que ocultar la parte fea y establecer una posición absoluta para garantizar que el elemento no interfiera con los elementos relacionados.

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

En los siguientes códigos podéis utilizar toda vuestra creatividad en ellos y personalizarlos como más os guste. El cursor es puntero para que el icono del cursor del ratón cambie cuando esté sobre el input. El icono está en formato svg, si ponéis otro formato aquí habría que cambiarlo. El .iborrainputfile lo podéis personalizar a vuestro gusto, cambiar el tipo de fuente, su tamaño y muchas otras cosas. Esta clase es utilizada en el icono y en el texto del input. El resto de código que hay es el de los estilos por separado donde podéis cambiar los colores y añadir otros estilos.

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.iborrainputfile {
	font-size:16px; 
	font-weight:normal;
	font-family: 'Lato';
}

JAVASCRIPT

El código siguiente es el que consigue que el texto del input se convierta en el nombre del archivo seleccionado y en caso de que se seleccionen más de un archivo, el texto nos dirá cuántos se seleccionaron.

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;
	});
});

Es bastante sencillo de implementar y con esto conseguiremos que el input file quede visualmente mucho más bonito y presentable. Os muestro una imagen como ejemplo.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que os sea de vuestro agrado este tutorial, podéis comentar todo lo que creáis conveniente.

ENLACE DE DESCARGA
Personalizar Input File (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code