Sin duda es uno de los elementos que más se descuidan a la hora de diseñar. Se suelen dejar en su diseño inicial bastante básico y donde cada navegador web lo interpreta de una forma diferente.
Ejemplos de personalización de un elemento input file
Con este artículo aprenderás a personalizar un input file, dándole un estilo más bonito, funcional en todos los navegadores, responsive y se conseguirá mediante un poco de CSS y JavaScript. Cuando se seleccione un archivo, el elemento input file mostrará el nombre del archivo seleccionado, también se podrá seleccionar varios archivos a la vez mostrando el número de archivos que han sido seleccionados.
En los ejemplos que pongo a continuación, en la página de CodePen, se puede personalizar el input file en siete estilos diferentes, donde podrás cambiar el CSS y el HTML para que quede más a tu gusto. El resultado será el siguiente.
Cómo personalizar un input file con HTML, CSS y JavaScript
El campo <input type="file"> es esencial cuando queremos permitir que los usuarios suban archivos a través de un formulario. Sin embargo, su aspecto por defecto suele ser poco atractivo y difícil de personalizar. Por eso, en este artículo te muestro cómo ocultar el input nativo y sustituirlo por un botón personalizado, totalmente estilizado con CSS, y que además muestre el nombre del archivo seleccionado.
¿Qué conseguimos con este método?
- Un botón de carga de archivos que encaja con el diseño de tu web.
- Una experiencia de usuario más limpia y profesional.
- Mostrar el nombre del archivo elegido, mejorando la claridad.
Ejemplo completo de código
A continuación, tienes un ejemplo funcional que puedes copiar, pegar y adaptar según tus necesidades:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Input file personalizado</title>
<style>
.input-file-container {
position: relative;
width: max-content;
}
.input-file {
display: none;
}
.input-file-label {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.input-file-label:hover {
background-color: #0056b3;
}
.file-name {
margin-left: 10px;
font-style: italic;
color: #333;
}
</style>
</head>
<body>
<div class="input-file-container">
<label for="file-upload" class="input-file-label">Seleccionar archivo</label>
<input type="file" id="file-upload" class="input-file" onchange="updateFileName()">
<span class="file-name" id="file-name">Ningún archivo seleccionado</span>
</div>
<script>
function updateFileName() {
const input = document.getElementById('file-upload');
const fileName = document.getElementById('file-name');
fileName.textContent = input.files.length > 0 ? input.files[0].name : "Ningún archivo seleccionado";
}
</script>
</body>
</html>
Explicación paso a paso
Este fragmento de código hace lo siguiente:
- Oculta el
<input type="file">original condisplay: none. - Utiliza una etiqueta
<label>estilizada como botón para activar la carga. - Con un poco de JavaScript, muestra el nombre del archivo una vez seleccionado.
¿Qué más se puede hacer?
Este diseño se puede extender y adaptar fácilmente. Algunas mejoras útiles podrían ser:
- Permitir múltiples archivos con el atributo
multiple. - Validar el tipo de archivo (por ejemplo, solo imágenes o PDFs).
- Mostrar una miniatura si se trata de una imagen.
- Estilizar aún más el botón para adaptarlo a la identidad visual de tu sitio.
Cómo personalizar un input file en Contact Form 7 de WordPress
Si tu web la has realizado con WordPress y utilizas el famoso plugin Contact Form 7 para los formularios, esto te vendrá muy bien para personalizar un input file y que funcione.
Para poner un input file en Contact Form 7, lo solemos hacer, por ejemplo, de la siguiente forma:
[file archivo id:file-2 class:inputfile limit:1mb filetypes:pdf]Me aprovecharé del código anterior HTML para dejarlo de la siguiente manera:
[file archivo id:file-2 class:inputfile limit:1mb filetypes:pdf] <label for=»file-2″><span class=»inputfile-personalizado»>ADJUNTAR ARCHIVO</span>
<svg class=»inputfiles» width=»16.647″ height=»14.497″ viewBox=»0 0 16.647 14.497″><g id=»archivo-adjunto» transform=»translate(0.374 -31.024)»><g id=»Grupo_202″ data-name=»Grupo 202″ transform=»translate(0 31.174)»><path id=»Trazado_3912″ data-name=»Trazado 3912″ d=»M14.65,32.644a5.034,5.034,0,0,0-7.111,0L1.026,39.158a3.509,3.509,0,0,0,4.963,4.963L12.5,37.607a1.991,1.991,0,1,0-2.816-2.815L4.247,40.233a.472.472,0,1,0,.668.668l5.441-5.441a1.046,1.046,0,0,1,1.479,1.479L5.321,43.453a2.565,2.565,0,0,1-3.627-3.627l6.514-6.514a4.083,4.083,0,1,1,5.774,5.774l-5.44,5.441a.472.472,0,1,0,.668.668l5.44-5.441a5.028,5.028,0,0,0,0-7.111Z» transform=»translate(0 -31.174)» fill=»#071d49″ stroke=»#071d49″ stroke-width=»0.3″/></g></g></svg>
</label>
Hay varias clases puestas para que puedas dar estilo al input file. Puedes ver los ejemplos de antes para inspirarte.
Ahora hará falta un poco de JavaScript, yo de normal pongo el siguiente código dentro de un archivo que tengo creado como scripts.js y alojado dentro de la carpeta js de mi Child Theme.
// Personalizar input file
jQuery(document).ready(function(e) {
if(jQuery(‘.inputfile’).length > 0)
{
var inputs = document.querySelectorAll( ‘.inputfile’ );
Array.prototype.forEach.call( inputs, function( input )
{
var label = jQuery(‘.inputfile-personalizado’),
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 )
jQuery(‘.inputfile-personalizado’).text(fileName);
else
label.innerHTML = labelVal;
});
});
}
});
Con este código conseguiremos que se muestre el nombre del archivo seleccionado. Es muy parecido al código que puse en Codepen, lo podría haber resumido un poco más pues este no será múltiple, sólo se podrá adjuntar un archivo. Si quieres que se puedan adjuntar más, sería repetir el código anterior cambiando el nombre en file, archivo era en el ejemplo, el id de file y for de label, en el ejemplo anterior era file-2, y aparecería uno debajo del otro.
También se puede utilizar algún plugin como Drag and Drop Multiple File Upload o Multiline files upload for contact form 7 Pro, este último de pago.
Paso una imagen de como quedaría con un poco de CSS:
Recuerda luego en Contact Form 7 poner el shortcode en archivos adjuntos, en el ejemplo anterior sería [archivo]. Si pones más de uno, pues uno debajo del otro.