blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

<input type=”file” /> via CSS durch eine Grafik ersetzen

Ich war heute auf der Suche nach einer Möglichkeit ein <input type=”file” /> durch eine Grafik zu ersetzen die beim anklicken den Dateibrowser öffnet. Im IE funktioniert das relativ einfach, man nimmt ein Bild das bei onclick ein per CSS ausgeblendetes <input type=”file” /> mit javascript:element.click(); anklickt und schon wird der Dateibrowser geöffnet.

Läuft aber halt nur im IE so. Im Firefox funktioniert das absolut gar nicht. Hat wohl sicherheitstechnische Hintergründe und muss ja auch gar nicht sein, denn es kann noch viel einfacher und eleganter umgesetzt werden wie Dave Clark bewiesen hat.

Man kann auch mit CSS ein <input type=”file” /> Element durch eine Grafik ersetzen die beim anklicken den Dateibrowser öffnet. Im Prinzip wird hier nur getrickst und man quasi an der Nase herumgeführt, denn hier ist das was man sieht nicht das was tatsächlich da ist. Man sieht ein Bild, klick aber auf ein durchsichtiges <input type=”file” /> Element.

Und das Prinzip ist echt super simpel. Man nimmt einen <div> und legt in diesen das <input type=”file” /> und einen weiteren <div>. Den äusseren <div> positioniert man relative um das in ihm liegende <input type=”file” /> absolute positionieren zu können. Für das <input type=”file” /> definiert man eine sehr große Schrift (zB. 30px). Damit bekommt der <input type=”file” /> Button einebeträchtliche Größe. Zusätzlich wird der Button absolute oben rechts positioniert.

Auf das <input type=”file” /> Element folgt ein weiterer <div>. Dieser erhält die Höhe und Breite der gewünschten Grafik welche dann auch als background eingebunden wird. Und jetzt kommt der Trick:
Der äusserste <div> bekommt nun auch die Breite der Grafik. Dadurch wird nun die Schaltfläche des <input type=”file” /> über das Bild gelegt, alles was überstehen würde wird mit overflow:hidden; abgeschnitten. Jetzt liegt die Schaltfläche auf der Grafik. Damit wir nun die Grafik sehen können muss einfach das <input type=”file” /> Element mittels opacity:0; für den Firefox und mit filter: alpha(opacity: 0); für den IE durchsichtig gemacht werden, bleibt dabei aber klickbar.

CSS:
div.uploader {
  position: relative;
  width: 28px;
  height: 26px;
  overflow: hidden;
}
input.uploadbox {
  position: absolute;
  right: 0;
  font-size: 30px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity: 0);
}
div.uploader_img {
  background: transparent url(uploader.gif) no-repeat scroll left bottom;
  white-space: normal;
  width: 28px;
  height:26px;
}

HTML:
<div class="uploader">
  <input class="uploadbox" type="file" />
  <div class="uploader_img">
  </div>
</div>

Und so sieht der neue Filebrowser Button aus diesem Beispiel aus:

4 Kommentare zu '<input type=”file” /> via CSS durch eine Grafik ersetzen'

Auf dem Laufenden bleiben per RSS oder TrackBack zu '<input type=”file” /> via CSS durch eine Grafik ersetzen'.

  1. christian sagt,

    Februar 22nd, 2007 um 12:50 pm

    danke für den tipp. werds mir für eines der nächsten projekte vormerken und ggf. einsetzen!

  2. Ingo sagt,

    März 1st, 2007 um 5:27 pm

    Gute Idee!
    Genau danach habe ich gesucht und werde das mal gleich verbauen.
    Danke

  3. rompers sagt,

    Mai 12th, 2007 um 4:45 am

    schöne sache nett währe auch wenn man sehn könnte was drin ist

  4. Mopsi sagt,

    Dezember 21st, 2010 um 12:31 am

    Niiiiiice =)

Kommentar schreiben:


89,874 Spam-Kommentare
blockiert von
Akismet