<input type="file" mit CSS formatieren

eagle275 · 10.09.2010, 13:44

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 :

HTML-Code:

.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 · 10.09.2010, 13:57

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

ChrisB · 10.09.2010, 14:16

Zitat:

Zitat von eagle275

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 · 10.09.2010, 16:55

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 · 13.09.2010, 09:38

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

HTML-Code:

	.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 · 13.09.2010, 10:19

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

Code:

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

Zitat:

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 · 13.09.2010, 10:52

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 · 13.09.2010, 11:03

Zitat:

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

Zitat:

das mit dem padding schau ich mal nach ...

und es hat das Problem gelöst ...

Prima.

ChrisB · 13.09.2010, 13:44

Zitat:

Zitat von Asipak

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

Code:

* 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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Erhaltene Email formatieren	michaela	PHP Tipps 2010	3	30.03.2010 17:12
Tabelle mit CSS formatieren?	hallo1995	HTML, Usability und Barrierefreiheit	5	23.06.2009 17:56
Inhalt eines Textfeldes formatieren	obi	JavaScript, Ajax und mehr	1	17.02.2009 00:02
Include Datei formatieren	st0ny	PHP Tipps 2008	12	31.07.2008 12:35
Zahl formatieren	simsalabim	PHP Tipps 2007	4	20.03.2007 14:25
html2fpdf: variable Textdateien formatieren	webazubi	PHP-Fortgeschrittene	4	22.02.2006 18:33
wie kann ich das datum formatieren:	bendigo	Datenbanken	4	30.08.2005 13:43
Excel mit PHP formatieren		PHP Tipps 2004-2	9	22.11.2004 11:12
[Erledigt] SELECT boxen formatieren		HTML, Usability und Barrierefreiheit	1	17.11.2004 17:33
Per Button Text formatieren	Igäl	HTML, Usability und Barrierefreiheit	1	11.11.2004 06:25
Ausgabe einer DB formatieren	Clan-Opa	PHP Tipps 2004-2	2	07.11.2004 23:12
[Erledigt] Preisanzeige formatieren		PHP Tipps 2004-2	2	05.11.2004 21:32
[Erledigt] Formatieren von Tooltips		PHP Tipps 2004	2	18.08.2004 13:02
<input type="file"> FORMATIEREN		HTML, Usability und Barrierefreiheit	5	22.07.2004 07:54
TIME-Feld formatieren	RudiS	Datenbanken	4	16.07.2004 16:16

10.09.2010, 13:44
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	<input type="file" mit CSS formatieren 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 : HTML-Code: .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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.09.2010, 13:57
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Einen Button kannst du stylen wie du willst. Vergiss aber dann cursor: pointer nicht.

10.09.2010, 16:55
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	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 Geändert von eagle275 (10.09.2010 um 16:58 Uhr).

13.09.2010, 09:38
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	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 HTML-Code: .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)

13.09.2010, 10:52
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	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 Geändert von eagle275 (13.09.2010 um 10:56 Uhr).*