paitadesignblog

HTML, CSS e tutto il resto

Input file: come cambiare lo stile… cross-browser!

Come applicare uno stile per tutti i browser all’elemento input type file?
Ci sono in giro molti plugin per la “personalizzazione” dell’elemento input “file”, elemento HTML che permette di caricare un file esterno:

Nessuno plugin però è abbastanza leggero, semantico e flessibile da poter essere usato al volo.
Ecco sotto una soluzione semplice che sfrutta il label e un pochino di JS:

HTML

CSS

JS

Ecco un interessante articolo su come ampliare la demo di questo post, e un pacchetto di esempio.

Ulteriori letture

Styling & Customizing File Inputs the Smart Way