Normalerweise hat man keine Möglichkeit, innerhalb eines Formulars den „Durchsuchen“-Button eines Input-Feldes vom Typ „File“ anders zu gestaltet, hierfür ist der Browser verantwortlich. Mit einem Trick klappt’s aber dennoch, ist aber zugegebenermaßen ein fieser Hack:

Als erstes legt Ihr diese Styles an:

/* Fileupload buttons */
div.meinefileinputs {
position: relative;
height:4em;
}

div.nursozumfake {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}

input.file {
position: absolute;
right:0;
z-index:2;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
font-size:50px;
height:46px;
line-height:50px;
cursor: pointer;
}

div.faketop {
width:140px;
background: url(logos/search.gif) no-repeat left top;
}

div.fakebottom {
width:140px;
white-space:normal;
padding-top:5px;
}

div.fakebottom p {
text-align:center;
margin:0px;
padding:0 5px 5px 5px;
font-size: 13px;
line-height:15px;
color: #006567;
font-weight:bold;
}

Im Formular braucht Ihr dann ein Textfeld und das Dateiauswahl-Feld:

<form action="irgendwohin.irgendwas" name="uploadform"
method="post" enctype="multipart/form-data">
<input size="50" name="mypath" type="text" />
<p class="meinefileinputs"> </p>

<p class="nursozumfake">
<input src="logos/upload.gif" name="Abschicken"
style="border: 0pt none " type="image" />
<input id="myfilebutton" class="file"
name="upimage"
onchange="document.upload_form.op.value=this.value;" type="file" />
<p class="faketop"> </p>
<p class="fakebottom"> </p>
</form>