- Publicidad -
10 Sep

Estilo para los inputs type=file

Fecha: 10 de Sep de 2007  |  Categorías: CSS, Diseño, Javascript, Tips, Web 2.0
- Publicidad -

<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

Autor: Jorge Haz un comentario

Hay 0 Comentarios en Estilo para los inputs type=file

Aun no hay comentarios, envia el tuyo me interesa tu opinion.

Escribe tu comentario

Al suscribirte recibirás un email cuando alguien conteste a tu comentario.

- Publicidad -
2294
LAS NOTICIAS EN TU EMAIL
Recibirás un correo con todos los articulos escritos en Frogx3 durante el día.