So gestalten Sie Dateieingabefelder wie Schaltflächen: Ein CSS-Leitfaden-CSS-Tutorial-php.cn

So gestalten Sie Dateieingabefelder wie Schaltflächen: Ein CSS-Leitfaden

Susan Sarandon

Freigeben： 2024-11-04 01:17:02

Original

648 Leute haben es durchsucht

How To Style File Input Fields Like Buttons: A CSS Guide

Eingabefelder mit dem Typ „Datei“ gestalten

Im Bereich der Webentwicklung ist die Anpassung des Erscheinungsbilds von Eingabefeldern oft eine Notwendigkeit. Während herkömmliche Eingabetypen möglicherweise ausreichen, kann das Entwerfen spezifischer Elemente wie Dateiselektoren einzigartige Herausforderungen mit sich bringen.

Das Rätsel um die unsichtbaren Textfelder

Eine dieser Herausforderungen besteht darin, das damit verbundene herkömmliche Textfeld zu verbergen Dateieingabefelder. Um das Benutzererlebnis zu verbessern, ist häufig eine Benutzeroberfläche erforderlich, die nur auf Tasten beschränkt ist. Um dies zu erreichen, sollten Sie den folgenden CSS-zentrierten Ansatz in Betracht ziehen:

CSS-Implementierung:

Das folgende Snippet zeigt, wie Sie das Textfeld verbergen und gleichzeitig die Schaltflächenfunktionalität beibehalten:

<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] {
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            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

Durch die Positionierung des „fakefile“-Elements über dem ursprünglichen Textfeld und die Einstellung seiner Eingabeschaltfläche auf die volle Breite entsteht das Erscheinungsbild einer Dateiauswahl im Schaltflächenstil. Gleichzeitig wird das eigentliche Textfeld ohne Deckkraft optisch verdeckt.

Das obige ist der detaillierte Inhalt vonSo gestalten Sie Dateieingabefelder wie Schaltflächen: Ein CSS-Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!