';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo personalizar un botón 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 básico y donde cada navegador web lo interpreta de una forma diferente.

Algunos ejemplos de botones input file

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.

A continuación podéis probar el buscador en la página de CodePen. Cambiar el CSS para que quede mejor en vuestro sitio web.

Ver ejemplos en CdePen

Código para implementar estos botones input file

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. En verdad solo necesitamos el archivo custom-file-input.js, así que copiamos y pegamos este archivo a nuestra carpeta js y los enlazamos preferiblemente desde el archivo functions.php del Child Theme si utilizáis WordPress. Los archivos jquery.custom-file-input.js y jquery-v3.4.1.min.js sólo los utilizaremos en lugar del otro si lo queremos hacer mediante jQuery.

Ahora abrimos la carpeta que dice css, copiamos todo lo que hay dentro del archivo file-input.css y lo pegamos dentro de nuestro archivo principal css.

Para acabar, sólo nos quedará añadir el HTML. Tenéis el código de todos los estilos en el archivo que hay dentro de la carpeta demo. Elegir uno de ellos y poner el código en el lugar donde queráis que se muestre dentro de un formulario.

Con sólo hacer esto ya lo tendréis personalizado. Recordar que este artículo es sólo para dar estilo al botón input file.

A continuación os dejo el enlace de descarga con todos los archivos.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Paco (Iborra Web Design)

Artículos destacados

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp