input file, arreglar fallos en el estilo y problema de opacidad con opera

pann84 · #1 (**permalink**) 27/08/2010, 01:50

Muy buenas a todos, estoy haciendo un formulario cuyo diseño me está trayendo bastantes quebraderos de cabeza. Lo que el diseñador quiere que haga es lo que podéis ver en la foto:

A simple vista es un campo <input type="file" /> cuyo botón es diferente de los habituales. Estuve indagando por la red a ver cómo podría hacerse, y lo conseguí hacer con opacidad aquí os dejo el código:

Código:

CSS
body {
	background: #f4f4f4;
}
form.example input {
	background: #fff no-repeat 0 -58px;
	border: none;
	width: 241px;
	height: 22px;
	padding-left: 3px;
	padding-top: 3px;
}
form.example input:focus {
	background-color: transparent;
}
 
form.example div.fileinputs {
	position: relative;
	height: 30px;
	width: 300px;
}
 
form.example input.file {
	width: 300px;
	margin: 0;
}
 
form.example input.file.hidden {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}
 
form.example div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	padding: 0;
	margin: 0;
	z-index: 1;
	line-height: 90%;
}
 
form.example div.fakefile input {
	margin-bottom: 5px;
	margin-left: 0;
}
  }

HTML
<form action="#" class="example">
  <div class="fileinputs"> 
    <input type="file" class="file hidden" noscript="true" />
    <div class="fakefile">
    <input value="Env&iacute;a tu CV desde tu equipo" />
    <img src="senfoastur/web/img/explorar.png" alt="browse" /></div> 
  </div>
</form>

Mis problemas son dos:
1._ El botón explorar no se alinea con la caja de búsqueda de archivo, y todos mis intentos lo único que han conseguido es apartar ambas cosas a la vez del borde superior.
2._ Lo he probado en Firefox, Chrome, Safari y Ópera, y se ve igual en todos salvo en Ópera, que parece que ignora la opacidad ¿sabríais decirme si hay algún modo de que no la ignore o la simule? En explorer desde la oficina no lo puedo probar, así que hasta que llegue a casa no sabré el desastre que seguramente sea..

Como siempre, muchas gracias de antemano ^^

cristian_cena · #2 (**permalink**) 27/08/2010, 04:33

hola pann84. He realizado esto para ti. Lo hice siguiendo este artículo. Aquí un demo. Esta en ti mejorarlo ;) Espero te sirva. Saludos.

pann84 · #3 (**permalink**) 27/08/2010, 05:39

Muchas gracias, no esperaba tato la verdad, y te agradezco que me envíes también un link a la guía, pues así aprenderé a hacerlo, aunque no acabo de entender todo el javascript. Gracias

cristian_cena · #4 (**permalink**) 27/08/2010, 05:54

jeje, a decir verdad solo utilize el javascript pero no lo estudié, asi que eso es tarea para ambos, aunque a la final funciona bien. Lo que no incluí pero estaria bueno que lo hagas es un sprite para las imagenes del boton, asi no "pestanea" cuando haces rollover, esta aplicación es la que uso yo (la adoro), seguro te va a servir.

Un saludo.

pann84 · #5 (**permalink**) 27/08/2010, 06:26

De todos modos lo que me envías no se ve en ópera, ese problema sigo teniéndolo, ignora la opacidad y parece que hay 2 file. Se nos resiste ese navegador, y yo algo debí hacer mal, porque adaptando tu código a lo mío, se ve perfecto en todos salvo en Ópera y Explorer, no se que narices he hecho...

De todos modos gracias, voy a echare un ojo a lo que me has puesto ahora

Me estoy dando cuenta también de que no se cambia el texto del campo, y eso puede dar error a los usuarios que piensen que no se ha subido nada... uf esto parece más complicado de lo que yo pensé en un principio..

cristian_cena · #6 (**permalink**) 27/08/2010, 07:38

Es cierto, no se ve en opera oops. yo lo veo bien en ie6,7y8.

Esto anda en opera (incluye las imagenes que te pase en el rar en la raiz junto al html que guardes con este codigo):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Styling File Inputs </title>
<style type="text/css">
.upload {
position: relative;
width: 80px;
height: 24px;
overflow:hidden;
background:url(btn-choose-file.gif);
clip:rect(0px, 80px, 24px, 0px );
}

.upload input {
position: absolute;
left: auto;
right: 0px;
top: 0px;
margin:0;
padding:0;
filter: Alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
}
.upload input:hover{background:;}
</style>
<script type="text/javascript">
function cambia(id){
document.getElementById(id).style.background="url(hover.gif)";
}
function cambia2(id){
document.getElementById(id).style.background="url(btn-choose-file.gif)";
}
</script>
</head>
<body>
<div id="hola" class="upload"> <input name="upload" type="file" onmousemove="cambia('hola');" onmouseout="cambia2('hola');"/></div>
</body>
</html>

Espero que lo puedas resolver, luego cuentame como te fue. un saludo

p-d: notaras que ya no uso el script que te pase en el rar, sino un javascript mucho mas sencillo.

para capturar el nombre del archivo que subirá el usuario y mostrarlo en pantalla ya veo que se me ocurre y en que te puedo ayudar.

cristian_cena · #7 (**permalink**) 27/08/2010, 08:45

hola pann, acabo de mejorar lo anterior, ahora se ve bien en opera, zafari, chrome, ie6,7y8, nada más no logro cargar el texto del archivo seleccionado por el usuario en firefox, espero lo puedas mejorar a tu necesidad. descargalo aca

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Styling File Inputs </title>
<style type="text/css">
*{margin:0; padding:0;}
body{
font-family:tahoma;
}
#content {
background:#eaeaea;
padding:5px;
overflow:hidden;
width:260px;
}
#textoinput{
width:170px; 
height:21px;
overflow:hidden;
background:white;
font-size:13px;
float:left;
padding:3px 0 0 5px;
color:gray;
overflow:hidden;
}
#valorinput{width:1500px; display:block; height:22px;}
.upload {
position: relative;
width: 80px;
height: 24px;
overflow:hidden;
background:url(btn-choose-file.gif);
clip:rect(0px, 80px, 24px, 0px );
float:left;
margin-left:5px;
}
.upload input {
position: absolute;
left: auto;
right: 0px;
top: 0px;
margin:0;
padding:0;
filter: Alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
width: 80px;
height: 24px;
}

</style>
<script type="text/javascript">

	function cambia(id){
	document.getElementById(id).style.background="url(hover.gif)";
	}
	function cambia2(id){
	document.getElementById(id).style.background="url(btn-choose-file.gif)";
	}
	function fileelegido(){
	var valor=formu.upload.value;
	document.getElementById('valorinput').firstChild.nodeValue="";
	//document.getElementById('valorinput').innerHTML=valor;
	div = document.getElementById('valorinput');
	texto = document.createTextNode(valor);
	div.appendChild(texto);
	}

</script>
</head>
<body>
	<div id="content">
		<div id="textoinput"><span id="valorinput">Envia tu CV desde tu equipo</span></div>
		<div id="hola" class="upload"> 
			<form name="formu" action="#">
				<input name="upload" type="file" onmousemove="cambia('hola');" onmouseout="cambia2('hola');" onchange="fileelegido();"/>
			</form>
		</div>
	</div>
</body>
</html>

Espero te sirva.

p-d: me olvide del cursor:pointer; para que aparezca la manito en el boton. solo agregalo [.upload input{cursor:pointer;}]

pann84 · #8 (**permalink**) 31/08/2010, 00:20

La verdad es que a mí en ópera sigue sin funcionarme como debería, me sale el botón normal por delante de la imagen, a ver si entre los dos lo arreglamos.

pann84 · #9 (**permalink**) 31/08/2010, 02:37

A ver qué te parece, me he 'olvidado' de darle todos los estilos necesarios, lo he simplificado y hasta lo he hecho con una sencilla tabla, pus lo que me interesa es que el invento funcione correctamente, luego ya será matizar el diseño, te pongo el código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
  <title>Senfoastur</title>
  <style type="text/css">
  <!--
    input.archivo
    {
      position: relative;
      text-align: left;
      -moz-opacity:0;
      filter:alpha(opacity: 0);
      opacity: 0;
      z-index: 2;
    }
	#archivofalso
	{
      position: relative;
   	  text-align: left;
   	  -moz-opacity:0;
   	  filter:alpha(opacity: 0);
   	  opacity: 0;
   	  z-index: 2;
    }
	div.caparchivo
	{
      position: relative;
   	  top: 0px;
   	  left: 0px;
   	  z-index: 1;
	}
	#nuevoarchivo {
		width: 170px;
		color: #666;
		font-family: Helvetica, Verdana, Arial;
		font-size: 0.8em;
	}
	label.cabinet
	{
		width: 79px;
		height: 22px;
		background: url(web/img/btn-choose-file.gif) 0 0 no-repeat;
		display: block;
		overflow: hidden;
		cursor: pointer;
	}
	label.cabinet input.file
	{
		position: relative;
		height: 100%;
		width: auto;
		opacity: 0;
		-moz-opacity: 0;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
		cursor: pointer;
	}
  -->
  </style>
  
</head>

<body>
<form>
<table width="270" border="0">
  <tr>
    <td valign="top">
      <div class="archivofalso">
        <input value="Env&iacute;a tu CV desde tu equipo" id="nuevoarchivo" />
      </div>
    </td>
    <td valign="top">
      <div class="caparchivo">
    <label class="cabinet"> 
      <input type="file" id="archivo" name="Archivo" class="archivo" 
      onChange = "getElementById('archivo').value=getElementById('nuevoarchivo').value;"
       />
    </label>
  </div>
    </td>
  </tr>
</table>
<input type="submit" value="envio" />
</form>


</body>
</html>

Como verás el código es mucho más sencillo, se medio ve en Ópera aunque sigue poniéndose rebeco, por lo demás, salvo explorer, va correctamente. He conseguido poder modificar el texto del campo, aunque sigo sin lograr que se vea el texto de la ruta del archivo que haya subido la persona en cuestión y bueno no le he puesto el hover, que quedaba muy mono, pero en principio me parece más importante lo de la ruta.

Muchas gracias por el esfuerzo de todos modos, a ver qué te parece mi código

pann84 · #10 (**permalink**) 31/08/2010, 04:44

He estado investigando por ahí y me he topado con lo que parece ser la solución, el problema es, que aunque sé modificar y manejar el CSS de JS no se ni papa...

Este es el artículo que he mirado:
[URL="http://www.albertlanchas.com/articulos/dar-estilo-a-un-boton-input-file"]http://www.albertlanchas.com/articulos/dar-estilo-a-un-boton-input-file[/URL]

Y de ahí es posible bajarse una demo, de todos modos esto ya más que del CSS es cuestión del javascript, de modo que gracias por los esfuerzos. si se os ocurre algo será bienvenido.