Rey’s CSS Haxx: Wie man einen Upload Button stylt

Veröffentlicht von Florian - 15. September 2015

Kennen Sie das auch? Man programmiert ein schönes Formular, in dem es auch die Möglichkeit für einen Dateiupload gibt. Doch der doofe Upload Button sträubt sich gestylt zu werden? Sämtliche CSS Eigenschaften prallen einfach an ihm ab? Das muss nicht sein...

File Upload

Denn hier kommt die Lösung! Mit einem kleinen CSS Trick und ein bisschen JavaScript für den letzten Schliff, lassen sich selbst die widerspenstigsten Upload Buttons mühelos stylen.

1. Das Grundgerüst

Beginnen wir zunächst mit dem normalen Standard-Button, wie wir ihn kennen. Hier in seiner einfachsten Form:

<form>
  <input type="file" />
</form>

Doch das reicht natürlich nicht ganz. Das eigentliche Prinzip des CSS Haxx sieht vor, den Upload Button innerhalb eines Containers so zu verschieben, dass lediglich seine Funktion erhalten bleibt und wir uns den Rest einfach nach Belieben zusammenbauen können. Erweitern wir unseren Button nun also um den entsprechenden Container und um seine neue Beschriftung:

<form>
  <div class="inputFile">
    <input id="inputFile" type="file" /> 
    <span>Upload</span>
  </div>
</form>

Wir haben nun also den Container .inputFile um unseren Button gelegt. Zusätzlich enthält dieser Container ein <span> Tag mit der angesprochenen Beschriftung.

2. Das Styling

Was jetzt folgt, ist ein bisschen CSS:

.inputFile {
  position:relative;
  width:80px;
  height:19px;
  background-color:#006ab2;
  text-align:center;
  padding-top:3px;
  overflow:hidden;
  border-radius:5px;
}
.inputFile input {
  position:absolute;
  top:0px;
  right:0px;
  opacity:0;
  height:100%;
  cursor:pointer;
}
.inputFile span {
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  color:#fff;
}

Wir geben dem Container .inputFile also eine relative Positionierung und ein overflow:hidden. Zusätzlich wird noch die passende Größe definiert. Die restlichen Attribute wie die background-color etc. können individuell gesetzt werden und dienen lediglich der optischen Darstellung. Für das <input> innerhalb unseres Containers definieren wir nun eine absolute Position und schieben das Ganze über top:0px und right:0px in die rechte obere Ecke. Mit einer opacity:0 stellen wir sicher, dass man den Button innerhalb des Containers nicht mehr sieht. Und mittels einer 100%-igen Höhe decken wir die gesamte Fläche ab. Zusätzlich kann noch ein cursor:pointer gesetzt werden, für den angemessenen Grad an Usability. Das <span> mit unserem Text kann nach Lust und Laune angepasst werden, um eine grafisch ansprechende Beschriftung zu erhalten.

3. Der letzte Schliff

Somit haben wir bereits einen schicken Button, der beinahe den vollen Funktionsumfang des „normalen“ Upload Buttons besitzt. Auf was wir bisher allerdings verzichten müssen, ist die Anzeige der hochgeladenen Datei. An dieser Stelle leidet also die Userfreundlichkeit, da dieser keine Rückmeldung bekommt, ob und welche Datei er hochgeladen hat. Um das jetzt trotzdem darstellen zu können, bauen wir in unser Formular zunächst ein Platzhalter Feld ein:

<form>
  <input id="inputText" placeholder="Keine Datei ausgewählt" disabled="disabled" />
  <div class="inputFile">
    <input id="inputFile" type="file" />
    <span>Upload</span>
  </div>
</form>

Hier kann als placeholder nun der Default Text eingetragen werden. Zusätzlich sorgen wir mit dem Attribut disabled, dass keine Werte in das Feld eingetragen werden können. Damit wir diesen Default Wert nun manipulieren können, benötigen wir ein wenig JavaScript:

document.getElementById("inputFile").onchange = function() {
  document.getElementById("iputText").value = this.value;
};

Die Funktion ist hierbei recht simpel. Wenn sich unser Element mit der ID #inputFile (der originale Upload Button) verändert, so schnappen wir uns diesen veränderten Wert (in der Regel der Name der hochgeladenen Datei) und packen ihn in das Element mit der ID #inputText (unser falsches <input> Feld). Somit haben wir wieder den vollen Funktionsumfang eines „echten“ Upload Buttons. Und das ist auch schon der ganze Trick dabei. Und nun geht und stylt mit diesem Wissen die Upload Buttons dieser Welt!

Das könnte Dich auch interessieren

Mit jQuery herausfinden, ob eine Checkbox angewählt ist (oder nicht)

Ich musste einen Weg finden mit jQuery zu überprüfen, ob eine Checkbox ausgewählt wurde. In jQuery ist es möglich zunächst zu überprüfen ob eine Checkbox...

PHP lokal testen ohne XAMPP?!

Zum lokalen Testen von PHP-Skripten gehört ein lokaler Server, wie der Topf zum Deckel. Dies ist die Standardregel - es ist Zeit diese Regel zu brechen wink Al...

WordPress Plugins – Wie erstelle ich eins

Plugins sind ein beliebtes Tool und Problemlöser für sämtliche Problem, welche auf einer WordPress-Seite auftauchen. Wer aber kein passendes Plugin für sein...