Comment styliser `` : masquer la zone de texte par défaut et conserver uniquement le bouton ?

Style  : amélioration de l'interface utilisateur des champs de saisie de fichier

Le style des éléments de saisie de fichier peut être difficile , surtout lorsque l’on recherche un design épuré et intuitif. Cette question répond au besoin spécifique de masquer la zone de texte par défaut et de conserver uniquement le bouton de sélection de fichier.

Solution : tirer parti du CSS et du HTML personnalisé

Pour obtenir ce style , une combinaison de CSS et de HTML personnalisé est utilisée. Voici comment procéder :

1. Utiliser les éléments positionnés :

   • Positionner à la fois l'élément d'entrée du fichier d'origine () et le "faux fichier" personnalisé en utilisant le positionnement absolu.

2. Créer un bouton personnalisé :

   • Créez un bouton séparé dans l'élément personnalisé pour afficher le texte « Sélectionner un fichier » dans l'élément « faux fichier ».

3. Masquer l'entrée d'origine :

   • Définissez l'opacité de l'entrée du fichier d'origine sur zéro à l'aide de l'opacité ou d'un filtre pour les anciens navigateurs.

4. Ajustez les propriétés d'affichage :

   • Définissez l'alignement du texte de l'entrée d'origine vers la droite, permettant au bouton de se chevaucher.
   • Positionnez le bouton personnalisé au-dessus de l'entrée d'origine en définissant son z-index à 1 et l'entrée d'origine à 2.

Exemple de code complet :

Voici le code complet qui démontre la mise en place de cette solution :

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

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

<code class="css">div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

div.fakefile input[type=button] {
    cursor: pointer;
    width: 148px;
}

div.fileinputs input.file {
    position: relative;
    text-align: right;
    opacity: 0;
    z-index: 2;
}</code>

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!