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

     
     Carica 
     

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.

Ulteriori letture