✔ <input type= "file"> formatieren (ohne textzeile darstellen)

[DrBonsai]

Hallo,

ist es tatsächlich nicht möglich, ein input type = "file" mit css um zu gerstalten?
Ich bräuchte einen enstsprechenden button, der in eine 172px * 138px div passt und nicht rausquillt.

Der Pfad zu dem File ist egal, da das Dokument eh gesendet wird, sobald der User das file gewählt hat. Deswegen wäre es das einfachste, wenn ich irgendwie den Teil vor dem Button einfach auf 0 bzw. invisible setzen könnte.

Geht das?

Nach meiner bisherigen Recherche, ist das formatieren dieses input types mit css nicht möglich, das kann ich mir aber irgendwie nur schwer vorstellen,

mfg,
David

 

[Maik]

Hi,

<input type="file"> lässt sich tatsächlich nicht direkt mit CSS (um)formatieren.

Und bei deiner Recherche bist du bislang nicht über die technische Möglichkeit gestolpert, die es mit ein paar wenigen Ausbauarbeiten ermöglicht?

• input type file css
  • 1. Suchergebnis: CSS2/DOM - Styling an input type="file"

mfg Maik

 

[DrBonsai]

Und bei deiner Recherche bist du bislang nicht über die technische Möglichkeit gestolpert, die es mit ein paar wenigen Ausbauarbeiten ermöglicht?

• input type file css
  • 1. Suchergebnis: CSS2/DOM - Styling an input type="file"

mfg Maik

Doch,
bin ich.
Dann bekomme ich einen schönen button, und ein schönes input-Feld. Aber letzteres verschwindet nicht..

mfg,
David

 

[Maik]

Ah ja, und was erzählst du hier dann breitspurig, dass du nur die Aussage recherchiert hättest, dass es keine Möglichkeit gibt?

Ich seh hier (in der genannten Seite) lediglich die genutzten Grafiken anstelle des Standardfeldes, und dass es sich hier nicht blos um eine grafische Abbildung handelt, hab ich mal aus Spaß an der Freud' auf "Select" geklickt:



mfg Maik

 

[DrBonsai]

Ah ja, und was erzählst du hier dann breitspurig, dass du nur die Aussage recherchiert hättest, dass es keine Möglichkeit gibt?

Ich seh hier (in der genannten Seite) lediglich die genutzten Grafiken anstelle des Standardfeldes, und dass es sich hier nicht blos um eine grafische Abbildung handelt, hab ich mal aus Spaß an der Freud' auf "Select" geklickt:

Anhang anzeigen 52480

mfg Maik

Freund,
ich erzaehle gar nichts breitspurig.

Meine viel schlankere Loesung, als der gepostete Vorschlag sieht jetzt so aus:

	<div class="file_input_div">
	<img src = "../img/upload.gif" />
<input  type="file" class="file_input_hidden" />
</div>

CSS:

.file_input_div
{
  position: relative; 
  width: 80px; 
  height: 23px; 
  overflow: hidden;
}

.file_input_hidden
{
	font-size: 45px; 
	position: absolute; 
	right: 0px; 
	top: 0px; 
	opacity: 0; 
	
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0;
}

In Worten:
Einfach das input-feld unsichtbar machen und ein Bild drueber legen.

mfg,
David

PS: Lorebeeren bitten an Tiago Epifânio
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html

 

[Maik]

Dein Freund bin ich nicht, sondern mein Name ist Maik.

Nichts anderes geschieht übrigens in meiner empfohlenen Seite, wenn du einfach mal die beiden Stylesheets miteinander vergleichst.

Aber wenn du mit deiner nun zwischenzeitlich selbst ausgegrabenen Variation glücklicher bist, weil sie jetzt mit ein, zwei HTML-Tags weniger daherkommt, und du meinen Vorschlag hier vordergründig nur madig machst, weil dir meine gestrige berechtigte kritische Anmerkung nicht bekommen ist, soll's mir auch recht sein

mfg Maik