Comment styliser les éléments d’entrée d’un fichier HTML ?

Styling Input Type="file"

Lorsque vous essayez de personnaliser des éléments d'entrée HTML de type "file", vous pouvez rencontrer des difficultés dues à restrictions du navigateur. Contrairement aux autres contrôles de formulaire, input type="file" a des capacités de style limitées. Pour surmonter cette limitation, envisagez d'utiliser la technique suivante.

Méthode CSS

Cette approche consiste à utiliser CSS pour masquer l'entrée du fichier d'origine et créer un "faux" bouton personnalisé. qui déclenche la boîte de dialogue de sélection de fichier.

<code class="css">/* Hide the actual file input */
input.file {
  display: none;
}

/* Create a custom "fake" button */
.fakefile {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  cursor: pointer;
}

/* Style the custom button */
.fakefile input[type=button] {
  width: 100%;
  height: 100%;
}</code>

<code class="html"><!-- HTML Code -->
<div class="fileinputs">
  <input type="file" class="file" />
  <div class="fakefile">
    <input type="button" value="Select file" />
  </div>
</div></code>

En cliquant sur le bouton personnalisé, la boîte de dialogue de sélection de fichier s'ouvrira, permettant à l'utilisateur de choisir un fichier. Le chemin du fichier sélectionné sera attribué à l'entrée du fichier caché, tandis que le bouton personnalisé reste visible comme interface de sélection de fichier.

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!