viernes, 6 de enero de 2012

Dando forma al input type file

Un día haciendo una página web al registarse, al usuario quería darle la opción de subir imágen. Previamente tenía el input de texto estilizado con css, pero no se aplicaba al input file. Ya que este viene con el botón añadido y trás unas horas de fallidos intentos, estilizarlo, quitar el botón y dejar solo a parte de text decidí buscarlo en internet y ver que ideas existen sobre como hacerlo. Mucha gente lo esconde y por encima pone un botón que llamará a nuestro input file através de un pequeño javascript. Es una solución bastante lógica y sencilla pero no conseguí hacerlo funcionar y encontre otra solución utilizando capas y es la que voy a comentar a continuación.

Ejemplo sencillo, consiste en crear un input file y un botón, el input file lo hacemos invisible y lo ponemos encima de nuestro botón, con lo
cual engañamos el ojo del usuario :D
<input type="button" value="Abrir fichero" name="abrir" id="abrir>
<input type="file">
en principo en el html no nos hace falta nada más, al file le podemos añadir name e id por si queremos retocarlo en el javascript más adelante.

Ahora en el css vamos a estilizar los dos inputs pero uno tendrá z-index: 1 y el otro 2. Nos quedaría algo así:

<style type="text/css">
input.hide
{
position:absolute;
left:-137px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

input.red
{
background-color:#cc0000;
font-weight:bold;
color:#ffffff;
z-index:1;
width:75px;
height:20px;
font-size:10px;
}
</style>

<!--[if IE]>
<style type="text/css">
input.hide
{
position:absolute;
left:10px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:0px;
border-width:0px;
}
</style>
<![endif]-->

<body>
<input type="button" class="red" id="pseudobutton" value="Open File">
<input type="file" class="hide" id="openssme">
</body>
En principio debería funcionar con eso, pero através de un pequeño javascript vamos a cambiar el borde del botón para que parezca más real:

<script type="text/javascript">
function buttonPush (buttonStatus)
{
if (buttonStatus == "depressed")
document.getElementById("pseudobutton").style.borderStyle = "inset";
else
document.getElementById("pseudobutton").style.borderStyle = "outset";
}
</script>
Añadimos la llamada a la función a nuestro botón:

<input type="file" class="hide" id="openssme" 
onmousedown="buttonPush('depressed');" 
onmouseup="buttonPush('normal');" 
onmouseout="buttonPush('phased');">
Fuente: www.dreamincode.net

Publicar un comentario