Maschinendenk

Dateiauswahlfelder mit CSS gestalten

0 Kommentare

Das Problem

Das Dateiauswahlfeld (”file select”) in XHTML Formularen lässt sich nicht wirklich mit CSS gestalten.
Das Aussehen des Textfeldes und der Auswahlbox kann nicht beeinflusst werden.
Der Grund hierfür ist, dass es sich hierbei um native GUI Elemente handelt, die vom Browser/Betriebssystem bereitgestellt werden.

input-normal

Die Lösung

Mit Hilfe von ein paar CSS Tricks, und ein wenig JS können wir ein voll gestaltbares Fileselect realisieren.

Das CSS

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;
}

Das XHTML

<div class = "fileinput" >

</div>

Zunächst erzeugen wir einen div Container, der unser Dateiauswahlfeld darstellt.
Innerhalb des Containers erzeugen wir ein Dateiauswahlfeld. Dieses Feld wird später unsichtbar sein, und wird nur für die eigentliche Funktion benötigt.

<input type="file" name = "file1" id="file1" class = "file" onchange = "file2.value = this.value;">

Nun bauen wir mit Hilfe eines normalen Textfeldes und eines Buttons den Dateiwähler nach:

<span class = "faux">
<input type="text" name = "file2" id="file2" style = "border:5px red dotted;" >
<input type = "button" name = "button" id = "button" value = "Durchsuchen..." style = "border:5px green solid;background:brown;color:white" />
</span>

Das span Element sorgt dafür, dass die beiden Felder darunter mittels z-index “über” dem eigentlichen Dateiwähler positioniert werden.
Das Textfeld und der Button innerhalb des span können wie gewohnt mit CSS gestaltet werden.

Das Ergebnis

<div class = "fileinput" >
    <span class = "faux">
    <input type="text" name = "file2" id="file2" style = "border:5px red dotted;" >
    <input type = "button" name = "button" id = "button" value = "Durchsuchen..." style = "border:5px green     solid;background:brown;color:white" />
    </span>	
</div>

input-normal

Das gesamte HTML und CSS dieses Tutorials findet sich auch unter http://o-dyn.de/selectfile.html

Geschrieben von Philipp

Juli 31st, 2008 at 10:31

Veröffentlicht in Allgemein

Kommentar schreiben

Sie müssen eingeloggt sein um einen Kommentar zu verfassen.