Personnalisation du contrôle

De nombreux développeurs ont rencontré des difficultés lors du style du contrôle. Cet élément affiche généralement une zone de texte et un bouton, qui ne correspondent pas toujours à l'esthétique souhaitée.

Masquer la zone de texte et conserver le bouton

Pour obtenir un aspect plus propre qui affiche uniquement le bouton, nous pouvons exploiter les techniques CSS. Voici une solution efficace :

Code CSS :

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

Code HTML :

Explication :

Ce code CSS et HTML crée un conteneur div (.fileinputs) pour positionner les éléments. Dans ce conteneur, nous ajoutons un faux élément d'entrée de fichier (.fakefile) qui apparaît au-dessus du véritable élément d'entrée de fichier (.file). En définissant l'opacité de l'entrée réelle sur 0, elle devient invisible. Le bouton dans la fausse entrée de fichier est ensuite personnalisé avec la largeur et le style du curseur pour conserver la fonctionnalité et la convivialité.