File-Input-Elemente schön gestalten

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.
Weiterlesen