Comment peut-on styliser un élément input pour le téléchargement de fichiers?

La personnalisation du <input type="file"> standard est difficile en raison des limitations des navigateurs. La meilleure approche consiste à masquer l'élément standard et à utiliser un autre élément (par exemple, <label> ou un bouton) pour déclencher la boîte de dialogue de sélection de fichiers.

1. Masquer le <input type="file"> standard :

.file-input {
  display: none; /* Ou visibility: hidden; height: 0; width: 0; pour l'accessibilité */
}

2. Créer un élément stylisé (par exemple, <label>) et le lier à <input> via l'attribut for :

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

3. Styliser l'élément créé :

.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; /* Exemple */
  /* Styles supplémentaires si nécessaire */
}

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

4. (Optionnel) Afficher le nom du fichier sélectionné :

L'écouteur d'événement change sur <input type="file"> permet d'obtenir des informations sur le fichier sélectionné et de l'afficher.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Élément d'affichage

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Aucun fichier sélectionné';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Aucun fichier sélectionné</span>

Cette méthode offre un contrôle total sur l'apparence de l'élément de chargement de fichiers tout en conservant le comportement standard du navigateur.