Heim > Artikel > Web-Frontend > Wie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?

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

Patricia ArquetteOriginal: 2024-11-01 16:51:02804Durchsuche

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>

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!

css html using this display input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erstelle ich mit JavaScript/jQuery einen nahtlosen Bildschieberegler mit Endlosschleife?Nächster Artikel：Wie erstelle ich mit JavaScript/jQuery einen nahtlosen Bildschieberegler mit Endlosschleife?

In Verbindung stehende Artikel

Mehr sehen