So gestalten Sie „: Das Standardtextfeld ausblenden und nur die Schaltfläche beibehalten?

Stilisierung von : Verbesserung der Benutzeroberfläche von Dateieingabefeldern

Die Gestaltung von Dateieingabeelementen kann eine Herausforderung sein , insbesondere wenn Sie ein klares und intuitives Design suchen. Diese Frage befasst sich mit der spezifischen Notwendigkeit, das Standardtextfeld auszublenden und nur die Schaltfläche zur Dateiauswahl beizubehalten.

Lösung: Nutzung von CSS und benutzerdefiniertem HTML

Um diesen Stil zu erreichen wird eine Kombination aus CSS und benutzerdefiniertem HTML verwendet. So geht's:

1. Positionierte Elemente verwenden:

   • Positionieren Sie sowohl das Originaldatei-Eingabeelement (

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

     Nach dem Login kopieren

<code class="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;
}</code>

Das obige ist der detaillierte Inhalt vonSo gestalten Sie „: Das Standardtextfeld ausblenden und nur die Schaltfläche beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!