Wie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?-CSS-Tutorial-php.cn

Wie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?

Patricia Arquette

Freigeben： 2024-11-01 16:51:02

Original

927 Leute haben es durchsucht

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

So stylen Sie um das Textfeld auszublenden und nur die Schaltfläche anzuzeigen

Stil kann eine Herausforderung sein, insbesondere wenn versucht wird, das Textfeld auszublenden und nur die Schaltfläche anzuzeigen.

CSS-Lösung

Um mit CSS den gewünschten Effekt zu erzielen, berücksichtigen Sie den folgenden Code:

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

Nach dem Login kopieren

Dieser CSS-Code erstellt eine Fakefile-Schaltfläche, die die echte Dateieingabe überlagert und das Textfeld mit der Deckkraft ausblendet: 0;.

Das obige ist der detaillierte Inhalt vonWie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!