Ich habe in letzter Zeit viel recherchiert um herauszufinden, wie man einen File-Input Element in HTML optisch verschönern und dem Design anpassen kann.
Leider ist bis auf minimale Veränderungen kaum etwas mit reinem CSS möglich. Der Hintergrund ist, laut diversen Seiten, dass man einen Datei-Upload feld auch immer als solches erkennen können soll.
Das ist eine Entscheidung die ich nachvollziehen kann. Doch es sollte von Haus aus Möglichkeiten geben, so einen Dialog an sein eigenes Design anzupassen.
Da es diese Möglichkeit aktuell nicht gibt, kommt man nicht um ein Fake-Dialog, mit einer Mischung aus Javascript, HTML und CSS, herum.
Und genau diese möchte ich euch hier heute vorstellen.
Dazu fangen wir erst mal mit den Elementen an.
Ich habe ein Div für den gesamten Upload Dialog genommen und dort neben einem Label und dem eigentlichen Upload-Element noch eine Textbox und einen Button eingefügt.
Jetzt bekommen sowohl der Button als auch das Textfeld noch die Anweisung, einen Klick auf sich selber als Klick auf das Upload-Element weiter zu geben.
Diese Methode funktioniert sowohl in Opera, Chrome als auch Firefox. Leider ließen sich weder der IE8 noch der IE9 dazu überreden, den Klick weiter zu geben, wodurch wir zu einem 2. Trick greifen müssen:
Der Positionierung via CSS.
Damit jetzt also der Klick auch im IE weiter gegeben werden kann, wird das FileInput Element per CSS auf die gleiche Größe gebracht, wie unser Fake-Dialog und direkt über die Elemente positioniert.
Sicher wird jetzt der Ein oder Andere sagen, dass das doch blöd aussieht. Richtig. Schließlich sind wir auch noch nicht fertig.
Denn zu guter letzt müssen wir das FileImport-Element noch ausblenden.
Auch hier gibt es wieder etwas zu beachten.
Wenn das Element über „display: none;“ ausgeblendet wird, funktioniert es nicht mehr in allen Browsern.
Ein Verschieben des Elementes außerhalb des sichtbaren Bereiches geht wegen dem IE nicht.
Daher bleibt nur noch die Möglichkeit, das Element komplett Transparent zu machen.
Der folgende Code gilt für alle gängigen Browser:
#importfile {
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
}Den restlichen Code für die Positionierung und Optik der einzelnen Elemente habe ich in diesem Beispiel außen vorgelassen um die Code-Segmente nicht unnötig in die länge zu Ziehen.
Solltet ihr noch Verbesserungsvorschläge oder Anregungen haben, hinterlasst mir einfach ein Kommentar.