Personnaliser un Input File CSS : la Méthode Simple

L’élément <input type="file"> est un des plus frustrants à styliser en CSS. Son look change sur chaque navigateur et ne correspond jamais au design de votre site. Vous cherchez une solution simple pour enfin le personnaliser ?

Cet article vous donne deux méthodes efficaces pour reprendre le contrôle. Vous trouverez ici le code exact pour personnaliser votre input file, avec une approche moderne et une alternative classique qui fonctionne partout.

La Méthode Moderne et Recommandée : ::file-selector-button

Pendant des années, il n’y avait pas de solution standard. Chaque navigateur avait son propre code, c’était un vrai bazar. Heureusement, ce temps est révolu. Aujourd’hui, la méthode recommandée et la plus simple est d’utiliser le pseudo-élément CSS ::file-selector-button.

Cet élément cible directement le bouton « Parcourir » ou « Choisir un fichier ». Il est maintenant supporté par tous les navigateurs modernes. C’est la technique à utiliser pour tout nouveau projet.

Exemple de code simple

D’abord, le code HTML. C’est un champ de type `file` tout à fait normal, avec un `label` pour l’accessibilité.

<!-- Code HTML -->
<label for="avatar">Choisir une photo de profil :</label>
<input type="file" id="avatar" name="avatar" />

Ensuite, le CSS. On va transformer ce bouton par défaut en quelque chose de plus propre. Vous pouvez adapter ces propriétés avec les couleurs et polices de votre site.

/* Code CSS */
input[type="file"]::file-selector-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

input[type="file"]::file-selector-button:hover {
  background-color: #0056b3;
}

Et c’est tout. Avec ce code, vous avez un bouton personnalisé sans une ligne de JavaScript. C’est propre, rapide et performant.

L’Alternative Classique : Cacher l’Input et Utiliser un <label>

Parfois, vous avez besoin de plus de contrôle ou d’une compatibilité avec de très vieux navigateurs. Dans ce cas, il existe une autre technique très solide. L’idée est simple : on cache l’input de type `file`, et on le remplace par un élément `` que l’on peut styliser comme on veut.

Le secret de cette technique, c’est de lier les deux. L’attribut for du label doit correspondre à l’id de l’input. Quand l’utilisateur clique sur le `label`, le navigateur comprend qu’il doit ouvrir la fenêtre de sélection de fichier.

Exemple de code avec un label

Voici le HTML. On a un `label` qui servira de bouton visible, et un `input` qui sera caché en CSS. J’ai ajouté quelques `class` pour les cibler facilement.

<!-- Code HTML -->
<div class="file-upload-wrapper">
  <label for="file-upload" class="file-label">Uploader une image</label>
  <input id="file-upload" class="input-file" type="file">
</div>

Maintenant, le CSS pour faire fonctionner l’astuce. La ligne la plus importante est display: none; sur notre `input-file`.

/* Code CSS */
.input-file {
  display: none;
}

.file-label {
  background-color: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}

.file-label:hover {
  background-color: #218838;
}

• Avantage principal : Cette méthode est extrêmement compatible et vous donne un contrôle total sur le design du bouton.
• Inconvénient : L’utilisateur ne voit pas le nom du fichier sélectionné. Mais on peut régler ça.

Aller plus loin : Afficher le nom du fichier avec JavaScript

Le seul défaut de la méthode avec le `label`, c’est qu’on n’a pas de retour visuel. L’utilisateur sélectionne un fichier, mais rien ne change à l’écran. C’est frustrant. Heureusement, un petit bout de JavaScript règle ça très simplement.

On va écouter l’événement change sur notre `input` caché. Dès qu’un fichier est choisi, on récupère son nom et on l’affiche à côté du bouton. Pour ça, on ajoute un `span` dans notre HTML pour accueillir le nom du fichier.

<!-- Code HTML mis à jour -->
<div class="file-upload-wrapper">
  <label for="file-upload" class="file-label">Uploader une image</label>
  <input id="file-upload" class="input-file" type="file">
  <span class="file-name">Aucun fichier choisi</span>
</div>

Et voici le script qui fait le travail. Il récupère le nom du fichier via event.target.files[0].name et met à jour le texte du `span`.

// Code JavaScript
const inputFile = document.getElementById('file-upload');
const fileNameSpan = document.querySelector('.file-name');

inputFile.addEventListener('change', function(event) {
  const fileName = event.target.files.length > 0 ? event.target.files[0].name : 'Aucun fichier choisi';
  fileNameSpan.textContent = fileName;
});

Pour voir ce que ça donne en pratique, vous pouvez regarder cet exemple. Voir la démonstration en direct.

FAQ – Questions fréquentes sur la personnalisation de l’input file

Comment changer le texte « Choisir un fichier » ?

Ça dépend de la méthode. Avec la technique du label, c’est facile : vous écrivez ce que vous voulez dans la balise <label>. Avec la méthode ::file-selector-button, vous ne pouvez pas changer le texte en CSS. Il est défini par le navigateur et la langue de l’utilisateur.

Peut-on le faire sans JavaScript ?

Oui, absolument. La méthode avec ::file-selector-button est 100% CSS et ne demande aucun script. La méthode du `label` fonctionne aussi sans JS, mais vous n’aurez pas le nom du fichier affiché, ce qui est moins pratique pour l’utilisateur.

Quelle méthode choisir en 2025 ?

La réponse est simple :

• Pour un projet neuf et des besoins simples, utilisez ::file-selector-button. C’est plus propre, moderne et performant.
• Si vous avez besoin d’une compatibilité maximale ou de contrôler l’affichage du nom du fichier, la technique du label avec un peu de JS reste une excellente option, très robuste.