Estilo para los inputs type=file

<input tye=”file” /> [w3School]

En Anieto2k acaban de publicar un post por mas interesante, se trata de la posibilidad de dotar de estilo a los inputs type=file (esos que sirven normalmente para subir archivos al server) utilizando CSS y Javascript, batante util ya que este elemento era el que le quitaba un poco el estilo a nuestros formularios, pero bueno aqui una alternativa.

HTML:

<label class="cabinet">    <input type="file" class="file" /></label>

CSS:

.SI-FILES-STYLIZED label.cabinet{width: 79px;height: 22px;

background: url(btn-choose-file.gif) 0 0 no-repeat;    display: block;

overflow: hidden;

cursor: pointer;

}

.SI-FILES-STYLIZED label.cabinet input.file

{

position: relative;

height: 100%;

width: auto;

opacity: 0;

-moz-opacity: 0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

Javascript:

<script type="text/javascript" src="/path/to/si.files.js"></script> SI.Files.stylizeAll();//oSI.Files.stylizeById('input-id');

Es compatible con IE5.5+, Firefox 1.5+, Safari 2+

Ver Demo / Descargar