Como pode estilizar um elemento input para carregar ficheiros?

A personalização do <input type="file"> padrão é difícil devido às limitações dos navegadores. A melhor abordagem é esconder o elemento padrão e usar outro elemento (por exemplo, <label> ou um botão) para invocar a caixa de diálogo de seleção de ficheiros.

1. Esconder o <input type="file"> padrão:

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

2. Criar um elemento estilizado (por exemplo, <label>) e ligá-lo ao <input> através do atributo for:

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

3. Estilizar o elemento criado:

.custom-upload-button {
  display: inline-block; /* Ou block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Exemplo */
  /* Estilos adicionais conforme necessário */
}

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

4. (Opcional) Mostrar o nome do ficheiro selecionado:

O listener do evento change no <input type="file"> permite obter informações do ficheiro selecionado e mostrar o seu nome.

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

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Ficheiro não selecionado';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Ficheiro não selecionado</span>

Este método fornece controlo total sobre a aparência do elemento de carregamento de ficheiros, mantendo o comportamento padrão do navegador.