¿Cómo se puede estilizar un elemento input para cargar archivos?

La estilización del <input type="file"> estándar es difícil debido a las limitaciones de los navegadores. La mejor opción es ocultar el elemento estándar y usar otro elemento (por ejemplo, <label> o un botón) para invocar el diálogo de selección de archivos.

1. Ocultar el <input type="file"> estándar:

.file-input {
  display: none; /* O visibility: hidden; height: 0; width: 0; para accesibilidad */
}

2. Crear un elemento estilizado (por ejemplo, <label>) y vincularlo con <input> mediante el atributo for:

<label for="upload-button" class="custom-upload-button">
  Seleccionar archivo
</label>
<input type="file" id="upload-button" class="file-input">

3. Estilizar el elemento creado:

.custom-upload-button {
  display: inline-block; /* O block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Ejemplo */
  /* Estilos adicionales según sea necesario */
}

.custom-upload-button:hover {
  background-color: #0056b3;
}

4. (Opcional) Mostrar el nombre del archivo seleccionado:

El listener del evento change en <input type="file"> permite obtener información del archivo seleccionado y mostrar su nombre en otro lugar.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Elemento para mostrar

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Archivo no seleccionado';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Archivo no seleccionado</span>

Este método proporciona control total sobre la apariencia del elemento de carga de archivos, manteniendo el comportamiento estándar del navegador.