Wie kann ich Eingabedatei-Steuerelemente mit CSS3 und JavaScript/jQuery formatieren?

Eingabedateisteuerung mit CSS3 und JavaScript/jQuery gestalten

Trotz ihrer inhärenten Funktionalität mangelt es der Eingabedateisteuerung häufig an optischer Attraktivität. CSS3 bietet begrenzte Möglichkeiten zum Gestalten dieses Elements, aber mit Hilfe von JavaScript oder jQuery können Sie sein Erscheinungsbild verbessern und an Ihr Design anpassen.

Verwenden von CSS zur Verbesserung des Erscheinungsbilds von Schaltflächen

Während CSS3 allein das grundlegende Erscheinungsbild der Eingabedatei-Schaltfläche nicht ändern kann, kann es verwendet werden, um den Container zu beeinflussen. Sie können beispielsweise eine benutzerdefinierte Hintergrundfarbe oder einen benutzerdefinierten Rahmenradius für ein umfassendes Div definieren:

.input-file-container {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

Öffnen des Durchsuchen-Dialogs mithilfe eines gestalteten Div

Alternativ können Sie ein optisch ansprechendes Div erstellen Wenn Sie darauf klicken, wird das Dialogfeld zum Durchsuchen von Dateien geöffnet. So geht's:

HTML
Erstellen Sie ein verstecktes Eingabedateielement und ein gestaltetes Div, das als anklickbare Schaltfläche fungiert.

<div>
<p><strong>CSS </strong><br>Stilen Sie das Div so, dass es a ähnelt Schaltfläche.</p>
<pre class="brush:php;toolbar:false">#file-button {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

JavaScript/jQuery
Binden Sie einen Ereignishandler an das Div, um beim Klicken das Dialogfeld zum Durchsuchen von Dateien zu öffnen.

$('#file-button').click(function() {
  $('#file-input').click();
});

Dieser Ansatz Bietet mehr Flexibilität bei der Gestaltung des Eingabedatei-Steuerelements und ermöglicht es Ihnen, es an Ihre gesamte Designästhetik anzupassen.