简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment personnaliser le bouton de saisie de fichier et masquer la zone de texte en HTML ?

Comment personnaliser le bouton de saisie de fichier et masquer la zone de texte en HTML ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-01 16:51:02804parcourir

How to Customize the File Input Button and Hide the Textbox in HTML?

Comment styliser pour masquer la zone de texte et afficher uniquement le bouton

Style peut être difficile, surtout lorsque vous essayez de masquer la zone de texte et d'afficher uniquement le bouton.

Solution CSS

Pour obtenir l'effet souhaité en utilisant CSS, considérez le code suivant : 

<code class="html"><html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

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

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

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

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

Ce code CSS crée un faux bouton de fichier qui chevauche l'entrée du fichier réel et masque la zone de texte en utilisant l'opacité : 0 ;.

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!

css html using this display input
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?Article suivant：Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?

Articles Liés

Voir plus