Anpassen des -Steuerelements

Viele Entwickler sind bei der Gestaltung der standardmäßigen Kontrolle. Dieses Element zeigt normalerweise ein Textfeld und eine Schaltfläche an, was möglicherweise nicht immer der gewünschten Ästhetik entspricht.

Ausblenden des Textfelds und Beibehalten der Schaltfläche

Um ein klareres Erscheinungsbild zu erzielen Da nur die Schaltfläche angezeigt wird, können wir CSS-Techniken nutzen. Hier ist eine effektive Lösung:

CSS-Code:

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

HTML-Code:

Erläuterung:

Dieser CSS- und HTML-Code erstellt einen div-Container (.fileinputs) zur Positionierung der Elemente. Innerhalb dieses Containers fügen wir ein gefälschtes Dateieingabeelement (.fakefile) hinzu, das über der echten Dateieingabe (.file) erscheint. Indem Sie die Deckkraft der realen Eingabe auf 0 setzen, wird sie unsichtbar. Die Schaltfläche in der gefälschten Dateieingabe wird dann mit der Breite und dem Cursorstil angepasst, um Funktionalität und Benutzerfreundlichkeit beizubehalten.