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:

Jesús Perales

Read more posts by this author.

Subscribe to Jesús Perales

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!