Vollansicht: File-Upload mit CSS formatieren
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
Auf der Suche nach einer browserübergreifenden Lösung für dieses Problem bin ich auf folgende Seite gestoßen. Leider etwas zu umfangreich für mich, außerdem sollte das Ganze auch ohne JS funktionieren. Falls jemand der Mitlesenden noch eine JS-freie Lösung parat hat, bitte hier melden.
moin!
Wäre ich auch dran interessiert, aber wir wohl nicht so einfach möglich sein.
File-Upload greift auf Betriebssystem Funktionen zurück ('Durchsuchen' Button), und normalerweise sollte ein
Browser darauf keinen Einfluss darauf nehmen können...
Ich denke, Javascript ist die einzige Möglichkeit, lasse mich aber in diesem Falle gerne belehren...
have fun!
Wäre ich auch dran interessiert, aber wir wohl nicht so einfach möglich sein.
File-Upload greift auf Betriebssystem Funktionen zurück ('Durchsuchen' Button), und normalerweise sollte ein
Browser darauf keinen Einfluss darauf nehmen können...
Ich denke, Javascript ist die einzige Möglichkeit, lasse mich aber in diesem Falle gerne belehren...
have fun!
Hallo,
meine Erfahrung ist, dass man "normale" input-Felder und Buttons problemlos gestalten kann; Dropdownlisten-Felder kann man aber nicht vollumfänglich umgestalten. Ich habe schon etliches versucht, aber bis auf den Text lässt sich nichts gestalten. Und für FileUpLoad-Felder dürfte das ähnlich gelten. Schade!
meine Erfahrung ist, dass man "normale" input-Felder und Buttons problemlos gestalten kann; Dropdownlisten-Felder kann man aber nicht vollumfänglich umgestalten. Ich habe schon etliches versucht, aber bis auf den Text lässt sich nichts gestalten. Und für FileUpLoad-Felder dürfte das ähnlich gelten. Schade!
ZITAT(i.b.g @ 16.05.2008 - 17:53) 
meine Erfahrung ist, dass man "normale" input-Felder und Buttons problemlos gestalten kann; Dropdownlisten-Felder kann man aber nicht vollumfänglich umgestalten. Ich habe schon etliches versucht, aber bis auf den Text lässt sich nichts gestalten. Und für FileUpLoad-Felder dürfte das ähnlich gelten.
Fileuploadfelder werden, wie harlequin bereits schrieb, einer Seite direkt vom OS "gegeben". Deshalb kann ein solches nicht per CSS formatiert werden. Ähnliches gilt (je nach Browser) auch für einige andere Formularelemente. Wackelkandidaten sind z.B. fieldset und legend oder auch input vom Typ radio.
Tschö, Auge
Hallo,
es ist möglich inputfelder des types "file" zu formatieren, bzw über einen kleinen umweg:
css:
Und hier der Passende HTML-Text:
Muss jeder selber gucken, wie er sich das CSS zusammenbastelt...
Gruß Cchater
es ist möglich inputfelder des types "file" zu formatieren, bzw über einen kleinen umweg:
css:
QUELLTEXT
div.fileinput {
position: relative;
}
.faux {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
position: relative;
}
.faux {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
Und hier der Passende HTML-Text:
QUELLTEXT
<form>
<h1>Hallo Welt!</h1>
<div class = "fileinput" >
<input type="file" name = "file1" id="file1" class = "file" onchange = "file2.value = this.value;" tabindex = "1">
<span class = "faux">
<input type="text" name = "file2" id="file2" style = "border:1px Black dotted;" >
<input type = "button" name = "button" id = "button" value = "Durchsuchen..." style = "border:1px Black Solid;Background:Lightblue;color:Darkblue" />
</span>
</div>
</form>
<h1>Hallo Welt!</h1>
<div class = "fileinput" >
<input type="file" name = "file1" id="file1" class = "file" onchange = "file2.value = this.value;" tabindex = "1">
<span class = "faux">
<input type="text" name = "file2" id="file2" style = "border:1px Black dotted;" >
<input type = "button" name = "button" id = "button" value = "Durchsuchen..." style = "border:1px Black Solid;Background:Lightblue;color:Darkblue" />
</span>
</div>
</form>
Muss jeder selber gucken, wie er sich das CSS zusammenbastelt...
Gruß Cchater
ZITAT(Cchater @ 16.01.2009 - 10:27)
Hallo,
es ist möglich inputfelder des types "file" zu formatieren, bzw über einen kleinen umweg:
css:
es ist möglich inputfelder des types "file" zu formatieren, bzw über einen kleinen umweg:
css:
QUELLTEXT
input.file {
position: relative;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
position: relative;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
Das ist eine sehr spezielle Formatierung. Du machst ja nichts anderes, als <input type="file"> zu positionieren und unsichtbar zu machen, was im Normalfall (zumindest bezüglich des Ausblendens) wohl eher nicht erwünscht ist. Das geht, aber weiter oben ging es darum, diesem Elementtyp Rahmen oder (Hintergrund)Farben zuzuweisen, wie es z.B. für <input type="text"> möglich ist. Das geht bei den aktuellen Browsern aber nicht, bei älteren Browsern, so sie überhaupt noch relevant sind, erst recht nicht.
Tschö, Auge
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.