decocode decocode deco    

Upload-Button formatieren mit CSS
und JavaScript #

Für den Upload von Dateien bietet HTML das Formularelement <input type='file'>. Formatierungen mit CSS beschränken sich hier lediglich auf das Textfeld. Der Button dagegen lässt sich normalerweise nicht gestalten.

Hier wird nun ein Hack beschrieben, wie man dennoch zumindest den Eindruck eines schönen Upload-Buttons erwecken kann. Zunächst ein Blick auf das Problemkind:

Unschwer zu erkennen: Das passt nicht zueinander. Der Trick besteht nun darin, ein normales Textfeld und einen Button so zu formatieren, wie wir uns das für das Upload-Feld wünschen, und das eigentliche Upload-Feld transparent darüber zu legen. So sieht der Benutzer das Double, benutzt aber das Original.

Zunächst müssen wir dafür sorgen, dass der rechte Rand des Upload-Feldes und des Buttons vom Double übereinander liegen:

Nun ziehen wird das Upload-Feld mit einem negativen Wert für margin nach oben und machen ihn mit opacity durchsichtig (hier: opacity:.5;):

Mit opacity:0; ist die Illusion perfekt:

Nun haben wir aber das Problem, dass der Hover-Effekt des Double-Buttons durch den darüberliegende Upload-Button nicht mehr funktioniert. Außerdem ist der Name der ausgewählten Datei nicht sichtbar, da er ja in das völlig transparente Upload-Feld eingefügt wurde. Mit JavaScript übertragen wir daher den Wert in das Textfeld des Doubles.

Mit ein wenig JavaScript-Zauberei werden nun schließlich beim Überfahren des Upload-Feldes die CSS-Eigenschaften des Double-Buttons geändert:

Hier nun der JavaScript- und HTML-Code für diesen Hack:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type='text/javascript'>
  /* <![CDATA[ */
  function copyValue(source, target) {
    var str = document.getElementById(source).value;
    if (str.indexOf("\\") != -1) str = str.substring(str.lastIndexOf("\\") + 1, str.length);
    document.getElementById(target).value = str;
  }
  function uploadHover(id, status) {
    var button = document.getElementById(id);
    if (status == 1) {  // hovered
      button.style.backgroundColor = "#0c6d0c";
      button.style.textShadow = "-1px -1px 0 #003800";
    } else {  // unhovered
      button.style.backgroundColor = "#005b00";
      button.style.textShadow = "-1px -1px 0 #004c00";
    }
  }
  /* ]]> */
</script>

<div>
<input style='width:400px;' type='text' id='text' readonly='readonly'>
<input style='width:130px;' type='button' id='uploadbutton' class='bigbutton' value='Durchsuchen…'>
<input type='submit' class='bigbutton' value='Abschicken'>
</div>

<div style='width:565px;text-align:right;margin-top:-22px;margin-bottom:14px;'>
<input style='opacity:0;' type='file' name='uploadfile' id='file' onmouseover='uploadHover("uploadbutton", 1);' onmouseout='uploadHover("uploadbutton", 0);' onchange='copyValue("file", "text");'>
</div>