Eduo, me avisa del nuevo artículo de Shauninman en el que nos enseña como decorar con CSS y Javascript estos elementos tan descuidados.
<input type=»file» />
Los elementos file, son los más descuidados, en cuanto a diseño, de todos los elementos <input />. Estos elementos nos permite interactuar con el sistema operativo enviando ficheros desde nuestro PC al servidor remoto. Pero el tema del diseño era algo delicado ya que no hay nada estandarizado para todos los navegadores que nos permita darle el toque estético que nos gustaría darle.
Gracias al conjunto de CSS y Javascript, podemos hacer posible esta transformación.
HTML
<label class="cabinet">
<input type="file" class="file" />
</label>
Primero añadimos las clases necesarias para que se apliquen los estilos.
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);
}
Definimos los estilos teniendo en cuenta las clases insertadas anteriormente y la clase que nuestro script le insertará a nuestro nuevo elemento file modificado.
Javascript
<script type="text/javascript" src="/path/to/si.files.js"></script>
SI.Files.stylizeAll();
//o
SI.Files.stylizeById('input-id');
Aplicamos el javascript para hacer que nuestro puntero siempre haga click en nuestro nuevo botón.
La magia
Desde nuestro CSS, le damos al elemento <label /> con class cabinet, la imagen que irá como background-image. Por otro lado hacemos que la opacidad de nuestro <input type="file" /> sea 0, dejándolo invisible para los seres humanos, pero no para el navegador, que permite hacer click sobre él sin ningún tipo de problema.
Finalmente el javascript hará que nuestro puntero accione siempre nuestro elemento file.
Compatibilidad
Con IE5.5+, Firefox 1.5+, Safari 2+
6 comentarios, 5 referencias
+
#