Skip to main content
Agregar comentarios CSS
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
// 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;
}
span.form-file-span {
    flex:1;
    display:inline-block;
    text-align:left;
/* Ocultar campo tipo padding:2pxfile 8px;
}*/
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-filesfile-span {
  flex:1;
  display:inline-block;
  colortext-align:#555;left;
  padding:2px 8px;
}
/* backgroundArhchivos en lista */
span.form-files {
  display:#ccf;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>
// 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();
}
.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;
}
span.form-file-span {
    flex:1;
    display:inline-block;
    text-align:left;
    padding:2px 8px;
}
input[type="file"].form-file {
    display:none;
}
button.form-file-button {
    vertical-align:middle;
  color:#fff;
  background:#25a;
    margin:0;
  border:0;
  transform:scaleX(-1);
}
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;
}
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>
// 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>
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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:

  1. Encerrar el campo y los nuevos elementos dentro de una etiqueta (label)
  2. Ocultar campo desde CSS con atributo display:none;
  3. Agregar un botón con la imagen o texto que prefieras
  4. 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
  5. Asignar evento al botón para mostrar ventana de selección de archivos
  6. 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();
}
.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;
}
span.form-file-span {
    flex:1;
    display:inline-block;
    text-align:left;
    padding:2px 8px;
}
input[type="file"].form-file {
    display:none;
}
button.form-file-button {
    vertical-align:middle;
  color:#fff;
  background:#25a;
    margin:0;
  border:0;
  transform:scaleX(-1);
}
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;
}
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