Aplicándole Estilo al Elemento Input Type=”file”

El elemento de tipo file -dentro del mundo CSS y XHTML “común”- es algo dificil de modificar en cuanto al estilo. Si le aplicásemos una clase, o un id vía CSS, no tomaría ninguna propiedad diferente.

Sin embargo, siempre se le puede encontrar una solución a estos problemas. En anieto2k han publicado un pequeño artículo que nos guía para poder darle estilo y diseño a un elemento del tipo file. Para ello se apoya en HTML, CSS, y algo de JavaScritp. A continuación les haré otra versión de su mini-guia:

XHTML:

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

Ahora definimos un poco de estilos:

.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);
}

Ahora debemos -mediante JavaScritp- hacer que el puntero siempre haga click en nuesto nuevo botón:

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

¿Cómo funciona? El CSS nos agrega una linda imagen de fondo a nuestro label. Luego le damos una opacidad cero (0) al elemento file, lo cual está definido dentro del segundo bloque de CSS, haciéndolo invisible al ojo humano (pero no al navegador). Luego, el JavaScritp se encarga de que nuestro puntero accione siempre el elemento file.

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

Enlace: Demo, Descargar

  • Miguel

    esta bravazo gracias man

  • Silvia

    no funciona para iet, no aparece la pantalla de selección de archivos. y las soluciones que he encontrado no funcionan. ¿alguien lo ha podido resolver?