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
* { box-sizing: border-box; } .form-row{ border: 1px solid #999; background-color:#DDD; height:32px; } #proof_documents { display:none; } .name-file { display: inline-block; width:75%; padding:0 20px; line-height:30px; font-family: Consolas, monaco, monospace; font-size:12px; } .myButton { background-color:#44c767; display:inline-block; cursor:pointer; color:#ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; padding:0 20px; line-height:30px; text-decoration:none; width: 20%; text-align:center; float: right; } .myButton:hover { background-color:#5cbf2a; } .myButton:active { position:relative; top:1px; }
JS
$('#proof_documents').on('change', function(){ $('.name-file').html(''); $('.name-file').html(document.getElementById("proof_documents").files[0].name) });
Ecco un interessante articolo su come ampliare la demo di questo post, e un pacchetto di esempio.