Comment puis-je personnaliser le contrôle `` pour masquer la zone de texte et afficher uniquement le bouton ?

Personnalisation du Control

De nombreux développeurs ont rencontré des difficultés pour styliser le 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 :

<code class="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>

Code HTML :

<code class="html"><div class="fileinputs">
  <input type="file" class="file" />

  <div class="fakefile">
    <input type="button" value="Select file" />
  </div>
</div></code>

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é.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!