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!