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