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.

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>

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