Stilizzazione input file

[glane66]

Salve ragazzi, sto letteralmente battendo la testa da quando mi sono imbattuto anch'io nell'annoso problema dello stile dell'input type="file". In pratica avrei bsogno di rendere il campo dell'input più basso e corto e sostituire il pulsante di "sfoglia" con una piccola immagine.
In rete vi sono diverse soluzioni, anche con javascript, j-query, ecc. ma non ho trovato per ora nulla che funzioni a dovere.
Qualcuno di voi ha forse una soluzione già sperimentata e soprattutto funzionante con tutti i browser più o meno recenti ?

[Experiment8]

Ciao,

Ti spiego il mio metodo, potrebbe tornarti utile, io lo uso per le select ma non dovresti avere problemi:

Wrappi l'input in un contenitore (ti consiglio span) con una classe, diciamo "classe-contenitore", a questa classe dai:

.classe-contenitore {
display: block;
overflow: hidden;
position: relative;
z-index: 998;
}

e tutte le regole che ti possano servire (background, width, ecc... questo sarà l'input fake visibile all'utente).
All'input vero (a cui ho messo una classe "classe-input") invece, dai:

.classe-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: 999;
}

In questo modo avrai visibile solo l'input fake, ma essendo l'input vero sopra al precedente, cliccandoci funzionera normalmente.

Spero di essere stato chiaro, se hai dubbi chiedimi pure

[glane66]

Ciao Experiment8,
saresti così gentile da fornirmi anche la parte HTML del codice, partendo da:

<form action="" method="post" enctype="multipart/form-data">
   <input type="file" name="pile">

   <input type="submit" name="submit" value="Submit">
</form>