Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de input file, arreglar fallos en el estilo y problema de opacidad con opera en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/08/2010, 02:50
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
input file, arreglar fallos en el estilo y problema de opacidad con opera

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 ^^

Última edición por pann84; 27/08/2010 a las 03:27
  #2 (permalink)  
Antiguo 27/08/2010, 05:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

hola pann84. He realizado esto para ti. Lo hice siguiendo este artículo. Aquí un demo. Esta en ti mejorarlo ;) Espero te sirva. Saludos.
  #3 (permalink)  
Antiguo 27/08/2010, 06:39
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera




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
  #4 (permalink)  
Antiguo 27/08/2010, 06:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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.
  #5 (permalink)  
Antiguo 27/08/2010, 07:26
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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..

Última edición por pann84; 27/08/2010 a las 07:35
  #6 (permalink)  
Antiguo 27/08/2010, 08:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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.

Última edición por cristian_cena; 27/08/2010 a las 08:45
  #7 (permalink)  
Antiguo 27/08/2010, 09:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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;}]

Última edición por cristian_cena; 27/08/2010 a las 09:51
  #8 (permalink)  
Antiguo 31/08/2010, 01:20
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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.
  #9 (permalink)  
Antiguo 31/08/2010, 03:37
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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
  #10 (permalink)  
Antiguo 31/08/2010, 05:44
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: input file, arreglar fallos en el estilo y problema de opacidad con opera

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.

Etiquetas: arreglar, estilo, fallos, file, input, opacidad, opera
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:17.