Come si può stilizzare un elemento input per il caricamento di file?

La personalizzazione dell'elemento <input type="file"> standard è difficile a causa delle limitazioni dei browser. Il metodo migliore è nascondere l'elemento standard e utilizzare un altro elemento (ad esempio, <label> o un pulsante) per aprire la dialog di selezione del file.

1. Nascondere l'elemento <input type="file"> standard:

.file-input {
  display: none; /* Oppure visibility: hidden; height: 0; width: 0; per l'accessibilità */
}

2. Creare un elemento stilizzato (ad esempio, <label>) e associarlo all'<input> tramite l'attributo for:

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

3. Stilizzare l'elemento creato:

.custom-upload-button {
  display: inline-block; /* Oppure block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Esempio */
  /* Stili aggiuntivi se necessari */
}

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

4. (Opzionale) Visualizzare il nome del file selezionato:

L'ascoltatore dell'evento change su <input type="file"> permette di ottenere informazioni sul file selezionato e di mostrarne il nome.

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

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

<span id="file-name">Nessun file selezionato</span>

Questo metodo garantisce un controllo completo sull'aspetto dell'elemento di caricamento file, mantenendo il comportamento predefinito del browser.