modificare lo style di un campo input (file)

[gasparirob]

Aiutandomi con le informazioni prese in giro su internet (ovvero qui praticamente) , sono riuscito a modificare lo style del suddetto campo input.
Il problema è che:
su IE funge
su Opera non funge
su FireFox funziona male.

posto il (breve) codice:

<div style="position:relative;">
		[img]IMG/sfoglia.gif[/img]
		<input class="file"class="" id="filebrow"onchange="visualizza();"name="file1" type="file" />
	</div>

che prende i seguenti dati da un file esterno css:

input.file {
	width: 1px;
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}
.immg{
	z-index: 0;
	position:absolute;
	left:5px;
	z-index:0;
	}

Descrivo brevemente il funzionamento:
ho un campo input di tipo file che ho impostato a trasparente (invisibile) e su di esso posiziono un' immagine a piacere. Cliccando sull'immagine avviene l'effettivo click sul campo input posizionato piu in alto (z-index)

che cosa avviene:
su IE tutto ok, come gia detto.
su FF il campo input ha grandezza "normale" (mentre a me serve di grandezza 0 o al massimo 1) con conseguente disallineamento tra la gif e il pulsante "sfoglia"
su Opera non funge proprio il campo input (rimane solo la gif)

Dove sbaglio?

ps: poichè non mi interessa il campo stringa del campo input (non mi interessa far visualizzare il file selezionato, perche lo faccio visualizzare a parte tramite js) andrebbe bene pure un pulsante button (al posto del campo input) che pero apra sempre la finestra per selezionare i file (ammesso che sta cosa sia possibile)

[gasparirob]

"Esperimenti" aggiuntivi:
se imposto width:80px (invece che 1px), su opera funge
se aggiungo 'size="1"' (all'input), funge su ff, ma ancora un po spostato rispetto alla gif (l'ideale sarebbe mettere 0 invece di 1, ma poi non funge proprio, nel senso che mi rimette la grandezza di default)
(tutte queste prove non influiscono su IE, che continua a funzionare bene)

[Mich_]

occhio alla sintassi: nella riga
<input class="file"class="" id="filebrow"onchange="visualizza();"name="file1" type="file" />
ci son almeno tre errori di sintassi: (spazi mancanti, attributi ripetuti).
Non ha senso cercare errori nel CSS se il codice HTML non e` corretto.

Prima di ritornare ti consiglio di passare dai validatori:
validatore HTML
validatore CSS

[gasparirob]

ok, nuova riga priva di errori (spero )
<input class="file" id="filebrow" onchange="visualizza();" name="file1" type="file" size="1"/>

cmq il risultato è sempre lo stesso: con width=80px e size=1 funge con tutti perfettamente (IE, FF, Opera) tranne che su FF dove il pulsante sfoglia è ancora un pochino disallineato rispetto alla gif (circa metà pulsante eccede la gif, e ovviamente sull'altra meta della gif non c'è il pulsante sfoglia, causato sicuramente da quel size=1 che invece dovrebbe essere =0)

ps: vada per gli attributi ripetuti, ma gli spazi mancanti sono importanti ai fini della corretta sintassi? nel senso: a volte mi capita di non separare i vari attributi... ma non è stato mai un problema...

[Mich_]

Originariamente inviato da gasparirob
ok, nuova riga priva di errori (spero )
<input class="file" id="filebrow" onchange="visualizza();" name="file1" type="file" size="1"/>
....
ps: vada per gli attributi ripetuti, ma gli spazi mancanti sono importanti ai fini della corretta sintassi? nel senso: a volte mi capita di non separare i vari attributi... ma non è stato mai un problema...

Dipende dai browser.
Comunque la sintassi obbliga ad inserire almeno un carattere di tipo spazio tra due attributi, e a non inserire caratteri tra attributo e suo valore.
Per non escludere i browser vecchi (IE5) conviene inserire uno spazio prima della slash di chiusura