Dar estilos a un input file

Dar estilos a un input file

Es muy sencillo dar estilos a un boton en HTML usando estilos, Bootstrap o algun otro framework de CSS, seria algo como:

<button type="button" class="btn btn-default">Soy un boton</button>

Pero las cosas cambian al tener un input del tipo file , pues este genera automaticamente un boton que no es muy bonito y tiende a ser diferente en cada plataforma o navegador.

Este problema se resuelve de muchas formas ya sea usando javascript,css o alguna libreria (http://whatknownsense.blogspot.mx/).

En mi caso yo usare css y nada mas:

  • Primero agregamos el boton con su respectivo label y ocultamos el boton.

      <label for="archivo" class="upload-button">Subir archivo</label>
      <input id="archivo" name="archivo" type="file" style="display:none" />
    
  • Despues agregamos estilos al label

      .upload-button{
      	//TODO
      }
      
      .upload-button:hover{
      //TODO	
      }
    
  • Al final el resultado quedaria muy similar a esto:

Simple!.

Fuentes: