Eliminar el label de "aún no se ha seleccionado ningún archivo"

index.html

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

opcion2.css

input[type='file'] {
  color: transparent;
}

opcion3.html

opción 3

default tooltip can be edited by using title attribute

<input type='file' title="your text" />

But if you try to remove this tooltip

<input type='file' title=""/>

This wont work. Here is my little trick to work this, try title with a space. It will work.:)

<input type='file' title="  "/>

scripts.js

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

styles.css

input[type='file'] {
  opacity:0    
}