No se pueden estilizar los campos de tipo file, tengo entendido que no depende solo del navegador, sino también del sistema operativo.
Afortunadamente, se puede crear un juego de reglas CSS para esconder el campo y agregar otros elementos que permiten simular el comportamiento original. A saber:
- Encerrar el campo y los nuevos elementos dentro de una etiqueta (
label
) - Ocultar campo desde CSS con atributo
display:none;
- Agregar un botón con la imagen o texto que prefieras
- Agregar un contenedor para mostrar archivo(s) seleccionado(s). Al estar dentro de la etiqueta, un clic hará que se muestre la ventana de archivos
- Asignar evento al botón para mostrar ventana de selección de archivos
- Asignar evento a campo para actualizar lista de archivos
Solo queda personalizar las reglas CSS para adaptarlo a tu gusto.
// Ejecutar hasta que se haya cargado la página
document.addEventListener('DOMContentLoaded', () => {
// Obtener inputs tipo file y sus botones para poder asignar eventos
const fileInputs = document.querySelectorAll('input[type=file]');
const fileButtons = document.querySelectorAll('.form-file-button');
// Asignar eventos a inputs y botones
fileInputs.forEach(file => file.addEventListener('change', fileChange));
fileButtons.forEach(button => button.addEventListener('click', fileClick));
});
// Cambios en inputs
function fileChange(e) {
// e - es el evento
// e.target - es el elemento que lo disparó
// .closest() - permite acceder al padre (label)
// desde el padre se obtiene el contenedor para mostrar archivos
let input = e.target;
let spanBlock = e.target.closest('label').querySelector('.form-file-span');
// Limpiar contenedor
spanBlock.innerHTML = '';
// Recorrer archivos para agregarlos al contenedor
Array.from(input.files).forEach(file => {
spanBlock.innerHTML += `<span class="form-files">${file.name}</span>`;
});
}
// Clics en botones
function fileClick(e) {
// Desde el botón se obtiene el input y se abre la ventana para seleccionar archivos
let input = e.target.closest('label').querySelector('input');
input.click();
}
/* Formato de etiqueta */
.form-block-input {
display:flex;
max-width:450px;
overflow:hidden;
font-size:0.9em;
color:#777;
background:#ddd;
border:1px #25a solid;
margin:2px;
padding:0;
border-radius:3px;
}
/* Ocultar campo tipo file */
input[type="file"].form-file {
display:none;
}
/* Botón para seleccionar archivos */
button.form-file-button {
vertical-align:middle;
color:#fff;
background:#25a;
margin:0;
border:0;
transform:scaleX(-1); /* Invertir botón horizontalmente */
}
/* Lista de archivos */
span.form-file-span {
flex:1;
display:inline-block;
text-align:left;
padding:2px 8px;
}
/* Arhchivos en lista */
span.form-files {
display:inline-block;
color:#555;
background:#ccf;
border:1px #25a solid;
margin:2px 8px 2px 0;
padding:2px 5px;
white-space:nowrap;
border-radius:3px;
}
/* Quitar margen horizontal al último elemento en la lista */
span.form-block-span:last-child {
margin:2px 0;
}
<p>
Input de un solo archivo:<br>
<label class="form-block-input">
<input type="file" name="custom-file" class="form-file">
<button class="form-file-button">⇱</button>
<span class="form-file-span">Selecciona un archivo</span>
</label>
</p>
<p>
Input de archivos múltiples:<br>
<label class="form-block-input">
<input type="file" name="multi-file" class="form-file" multiple>
<button class="form-file-button">⇱</button>
<span class="form-file-span">Selecciona archivos a subir</span>
</label>
</p>
Notas sobre flex
:
- En la etiqueta se usa
display:flex;
para que el botón y lista de archivos se adapten - La lista de archivos tiene
flex:1;
para tomar el ancho máximo disponible y evitar que haya márgenes o el botón cambie de ancho - Botón y lista de archivos van a tener siempre la misma altura