Los navegadores no permiten aplicar estilo a los input file. File Style Plugin resuelve este problema, permitiendo usar una imagen como botón.

Este plugin esta inspirado en un trabajo anterior que realizó Shaun Inman y su uso es realmente sencillo. Basta incluir jQuery File Style:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

y añadir un código similar al siguiente:

$("input[type=file]").filestyle({ 
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
});

Donde "choose-file.gif" sería nuestra imagen personalizada y el resto de parámtros tanto las dimensiones de la imagen como las del elemento input.

File Style Plugin » »