Comment personnaliser le bouton de saisie de fichier et masquer la zone de texte en HTML ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-11-01 16:51:02

original

927 Les gens l'ont consulté

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>

Copier après la connexion

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!