Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Artikel

Artikel

Patrick Saar

Button eines input-type-file-Elements mit CSS stylen

In diesem Tutorial zeige ich wie man ein Input type=file Element mit CSS und jQuery stylen kann.

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.


Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok