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

comment ¿Que opinas?

Artículos recientes

close

play_circle_outline Este es el nuevo trailer de Spider-Man: Homecoming

Una agradable sorpresa para aquellos fanáticos del universo de Marvel y sobre todo para los seguidores del universo de las pelicular de los Vengadores; pues el día de hoy se dio a conocer el nuevo adelanto…

close

Estos son los primeros ganadores del Sony World Photography Awards 2017

El día de hoy se dieron a conocer algunos de los ganadores del Sony World Photography Awards 2017; estos ganadores pertenecen a las categorías Open y National; por lo que aún restan los ganadores de…

close

Mockups gratis para presentar publicidad exterior

Les comparto una selección de útiles mockups gratuitos perfectos para presentar diseños de publicidad exterior, todos los mockups son de diferentes formatos para algunos de los medios de publicidad exterior más populares que puedes ver en…

close

Mira esta colección de logotipos animados para tu inspiración

Los logotipos son fuentes de inspiración únicas; esto debido a que para su realización se utiliza una gran gama de técnicas y estilos; las cuales son apreciables para los ojos entrenados que andan en busca…

close

WhatsApp da a conocer detalles sobre su actualización para borrar mensajes

WhatsApp ha dado a conocer nuevos detalles sobre su nueva y esperada actualización; la cual, incorpora una característica que muchos están esperando… la posibilidad de eliminar mensajes antes de que sean leídos por el destinatario….

close

Genial diseño de packaging sustentable y minimalista para bombillas eléctricas

Este genial diseño de Packaging creado por un estudiante del Instituto de Diseño Unitedworld en la India; cabe señalar que este diseño fue creado como parte de una tarea escolar; la cual señalaba un problema a…

notifications Recién publicamos
close