Das Input File Element
Mit einer HTML-Zeile kann man seinen Benutzern die Möglichkeit bieten, Dateien auf der eigenen lokalen Festplatte über ein Dialogfenster des Betriebssystems auszuwählen - z.B. für einen Datei-Upload. Dass man diese Funktionalität mit einer Zeile HTML-Code erreichen kann, ist sicherlich großartig.
<input type="file" id="input-file" />Webdesignern bzw. Webentwicklern, die ein erhöhtes Augenmerk auf den Aspekt Design legen, stellt sich aber ein Problem. Das Input File Element lässt sich nicht per CSS ohne einen kleinen Workaround stylen. Diesen Workaround stelle ich hier vor. Aber schauen wir uns erstmal an, wie das Input File Element ohne Styling aussieht.
Das Input File Element ohne CSS-Styling
Links haben wir ein Textfeld, in dem bei einer erfolgreichen Auswahl einer Datei der Pfad zu dieser Datei angezeigt wird. Rechts den Button "Durchsuchen", der bei Anklicken das Dialogfenster öffnet. Designtechnisch ist das jetzt nicht der Hit, oder? Und mit einfachem CSS kommt man hier leider auch nicht weiter.
Das Input File Element individuell stylen
Zum Workaround: Dieser generiert per jQuery einen zweiten Button. Das input type=file Element wird ausgeblendet und die Funktionalität auf den Button übertragen.
Der HTML-Code sieht wie oben aus.
<input type="file" id="input-file" />Der jQuery-Code baut nun den zweiten Button und überträgt die Funktionalität auf diesen.
$('#input-file').before('<input type="button" id="button-file" value="Datei Upload" />');
$('#input-file').hide();
$('body').on('click', '#button-file', function() {
$('#input-file').trigger('click');
});Mit CSS-Code wird der Button mit einem roten Farbverlauf, der beim Anklicken seine Richtung umkehrt, versehen.
Der CSS-Code:
#button-file {
color: #fff;
font-weight: bold;
border: 1px #999 solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#bb0000ff', EndColorStr='#990000ff');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b00), to(#900));
background: -webkit-linear-gradient(top, #b00, #900);
background: -moz-linear-gradient(top, #b00, #900);
background: -ms-linear-gradient(top, #b00, #900);
background: -o-linear-gradient(top, #b00, #900);
background: linear-gradient(top, #b00, #900);
padding: 10px 5px;
}
#button-file:active {
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#990000ff', EndColorStr='#bb0000ff');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#900), to(#b00));
background: -webkit-linear-gradient(top, #900, #b00);
background: -moz-linear-gradient(top, #900, #b00);
background: -ms-linear-gradient(top, #900, #b00);
background: -o-linear-gradient(top, #900, #b00);
background: linear-gradient(top, #900, #b00);
}
#button-file:hover {
cursor: pointer;
}Der Workaround ist untenstehend visualisiert. Bei deaktiviertem JavaScript wird der browserspezifische Button angezeigt.
