<input type="file" mit CSS formatieren

[eagle275]

ich wurde gebeten in meiner Webanwendung einen Upload für Word-Dokumente einzubauen ..

Das procedere an sich ist kein Problem ..

aber 2 Sachen gehen mir auf'n Zeiger :

1) wieso kann ich eine einmal ausgewählte Datei nicht mit <Backspace> / <DEL> Taste löschen ? das ist doch im Grunde "nur" ein Text-Feld und ein Button dahinter ?

2) sämtliche meiner CSS-Styles sind entweder wirkungslos - oder betreffen nur das Text-Feld .. der Button dahinter sieht immer noch nach Browser-Standard aus , ich muss aber eine Style-Anweisung befolgen (insgesamt 50 Seiten PDF ^^)

hier mal der betreffende Style, den ich dem input type="file" gegeben habe :

.ibrform {
   margin-top: 0px;
   margin-left: 0px;
   margin-bottom: 3px;
   width:	298px;
   border: 1px solid #A1A1A1;
   background-color: #FFFFFF;
   color: #003B69;
}

width wird komplett ignoriert ...
border wirkt nur auf Textfeld und auch dann scheint nur rechts / unten, oben und links nimmt "er" wieder Browser-Standard, background und color wirken ausschließlich aufs Textfeld

? muss ich das "Mistding" etwa per Hand einzeln bauen - dann fehlt mir aber der nette File-Auswahl-Dialog, sobald man ins Textfeld klickt ....?

wie erreich ich, dass ich dem Button auch Style geben kann ? wie krieg ich nen Abstand zwischen beide ? Wie krieg ich den Rahmen sowohl vom Textfeld als auch vom Button selbst gestylt?.... Fragen über Fragen

danke für eure Mühen schon mal

[halskrause]

Einen Button kannst du stylen wie du willst. Vergiss aber dann cursor: pointer nicht.

[ChrisB]

2) sämtliche meiner CSS-Styles sind entweder wirkungslos - oder betreffen nur das Text-Feld .. der Button dahinter sieht immer noch nach Browser-Standard aus

Es sollte doch wohl bekannt sein, dass sich der Button kaum per CSS stylen lässt - aus Sicherheitsgründen.
Ein Datei-Upload ist eine sensible Angelegenheit - und dem Benutzer per Formatierung, Beschriftung etc. vorgaukeln zu können, dass an der Stelle etwas anderes passiere, ihm also zu verschleiern, dass er eine Datei zum Hochladen an den Server auswählt, wäre eine potentielle Sicherheitslücke.


Es gibt aber JavaScript-basierte Workarounds (Google!) - wie zuverlässig die in allen Browsern funktionieren, kann ich dir aber nicht sagen.

[eagle275]

1) danke für eure Mühen
2) hat sich erledigt, weil ich den gleichen Post (ziemlich derselbe Textlaut) eines anderen Users gefunden habe - entschuldigt bitte, dass ich ihn erst nach meinem Thread hier gefunden und gelesen habe ...
3) hat sich auch erledigt . die 3te vorgeschlagene Lösung funktioniert mit minimalem Javascript-Einsatz .. von daher ..... klappt
4) sieht um Längen besser aus - und ein "lässt sich nicht stylen" kann man Chefs nunmal nicht wirklich gut erklären ....

für den / die Interessierten ... mit opacity und z-index packt man das unsichtbare file-upload "nach oben" und drunter liegt auf gleicher Bildschirm-Position der sichtbare Teil bestehend aus gestyltem Eingabe-Feld und einem Gif-Bild des passenden Buttons ... das der Button aufs klicken nicht reagiert stört hier bisher keinen ( nach 1.5 Stunden testen) - und obendrein kann man das Ersatz-Textfeld ganz gut zu Abfrage-Zwecken einsetzen

Danke, kann zu hier

[eagle275]

tja .. da bin ich wieder - ich habe die im anderen Post empfohlene Lösung von Kavior http://www.kavoir.com/2009/02/stylin...-typefile.html benutzt - funktioniert auch soweit ...

aber IE6 - ja noch muss ich ihn unterstützen - schiebt das gesamte Formular-Teil bestehend aus gefaktem Upload-Element und das echte Uploadelement samt zugehörigem Label um ca 20 bis 30 px nach rechts, was irgendwie blöd ist, da neben mein Formular noch ein Info-Div gehört, der dadurch nun unten "hängt" ...

ich hab nun bereits versucht die Elemente von Kavior mit negativem Margin-left zurück zu schieben, aber will nicht ....

hier mal die css-Anweisungen

	.upload {
		margin-top: 4px;
		position: relative;
		width: 468px;
		height: 21px;
		line-height: 21px;
		list-style-type: none;
	}
	* html li .upload { /* Anpassung IE 6 */
		margin-top: 4px;
		position: relative;
		width: 468px;
		height: 21px;
		line-height: 21px;
		list-style-type: none;
		margin-left: -20px;  /* Versuch nach links zu schieben */
	}
	.realupload {
		position:absolute;
		top:0;
		right:0;
		margin-left: -20px;
		opacity:0;
		-moz-opacity:0;
		filter:alpha(opacity:0);
		z-index:2;
		width:298px;
	}
	form .fakeupload {
		line-height: 21px;
		background:url(./img/button_select.gif) no-repeat 100% 50%;
	}
	form .fakeupload input {
		line-height: 15px;
		height: 16px;
		width: 150px;
	}
....

<li class="upload">
   <label for="xform">Formular hochladen:</label>
   <div class="fakeupload">
      <input type="text" id="fakeupload" name="fakeupload" />
         </div>
      <input type="file" name="xform" id="realupload" class="realupload"
       onchange="this.form.fakeupload.value=this.value;" />
</li>

habt ihr noch irgendwelche Ideen, wie ich das li-Element dort im Formular wieder an den Linken Anschlag kriege ? ... die anderen Formular-Elemente liegen in <p Absätzen und beginnen links auf 240 px (in dem Bereich da ist ein div mit Navigationsmöglichkeiten)

[Asipak]

Ich bin mir nicht sicher, aber ist diese Notation überhaupt gültig?

* html li .upload

Ich meine das Leerzeichen zwischen li und .upload. Negative Werte für margin werden - glaube ich - vom IE 6 nicht interpretiert. Hast du mal geschaut, ob du noch irgendwo das padding auf 0 setzen kannst o.ä.? Ich kann dir leider keinen eindeutigen Tipp geben. Bei sowas muss ich auch immer selbst herumprobieren.

die anderen Formular-Elemente liegen in <p Absätzen und beginnen links auf 240 px

Wieso sind diese überhaupt anders ausgezeichnet und nicht Teil der Liste?

[eagle275]

also fang ich mal von hinten an ..

3) die <p > sind mein eigener Code, den ich um Kaviors vorschlag mit dem <li erweitert habe

sämtliche Versuche das <li durch <p zu ersetzen führen aber dazu , dass das unsichtbare File-input nicht mehr über dem sichtbaren Element liegt ...

und meine <p durch <li ersetzen ... hab ich ehrlich gesagt noch nicht probiert

2) das Leerzeichen zwischen Li und upload ist auch mein 2ter Versuch dort - ich hatte es anfangs nicht drin, was aber an der Darstellung nichts ändert ...

1) ...negative margins im IE6 sind sonst mein (All-)Heilmittel, wenn der die Darstellung wieder gegenüber dem FF (3.6 und neuer ) versaut ...

das mit dem padding schau ich mal nach ...

und es hat das Problem gelöst ... .upload .realupload jeweils ein padding: 0;
*html li.upload ein padding: 3px (wegen 3 px - Jog ) und es klappt

Danke

[Asipak]

...negative margins im IE6 sind sonst mein (All-)Heilmittel, wenn der die Darstellung wieder gegenüber dem FF (3.6 und neuer ) versaut ...

Okay, hatte im Hinterkopf, das ich damit mal Probleme hatte.

das mit dem padding schau ich mal nach ...

und es hat das Problem gelöst ...

Prima.

[ChrisB]

Ich bin mir nicht sicher, aber ist diese Notation überhaupt gültig?

* html li .upload

Ich meine das Leerzeichen zwischen li und .upload.

Natürlich ist das gültig - so wie auch das Leerzeichen zwischen html und li gültig ist. Das ist schlicht und einfach der Nachfahren-Selektor.

Die Bedeutung von li .xyz ist damit natürlich eine andere, als die von li.xyz