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