Dieter Raber: abändern des <input type="file">

Beitrag lesen

SELF-Forum

abändern des <input type="file">

Dieter Raber
– Informationen zu den Bewertungsregeln

Hallo Nicki,

man kann das mit einem CSS-Trick erreichen und der geht so:

  • Du baust das input-Feld in einen <div> ein, gibst diesem per CSS position:relative;z-index:1
  • In den <div> vor den <input> kommt dein Bild, dieses positionierst du absolut, z-index:2
  • den <input> positionierst du relativ, z-index:3

Wenn alles geklappt hat, siehst du jetzt ein Bild, das von dem <input> teilweise bedeckt wird. Jetzt setzt du den <input> auf opacity: 0, fuer den IE brauchst du den Filter Alpha, das sieht dann etwa so aus:

input {  
  opacity:0;  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);					  
}

Wenn man jetzt auf den nicht mehr sichtbaren <input> klickt, oeffnet sich dennoch der Dialog.

Nachteile:

  • Das Bild muss eindeutig sein, damit der User auch weiss, dass er darauf klicken soll
  • Das Bild sollte vollstaendig vom <input> bedeckt sein, weil es sonst Stellen gibt bei denen beim Klicken nichts passiert
  • <input type="file"> sind von Browser zu Browser und OS zu OS sehr verschieden, du musst das gewissenhaft testen.

Gruss

Dieter

Beitrag melden
–
Informationen zu den Bewertungsregeln