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