Personalizar botón input=file

wakewakeup · #1 (**permalink**) 15/03/2005, 03:21

Buenas
Estoy intentando personalizar el botón "Examinar" de un input de tipo file, pero no lo consigo. a los botones normales le pongo el BACKGROUND-COLOR: #006699; pero en este se cambia de color la casilla de texto en vez del botón.
He estado buscando información y he encontrado esta chapucilla
http://www.quirksmode.org/dom/inputfile.html
pero ademas solo funciona en IE. Sabeis algún truco?
tan solo quiero ponerle un tamaño y cambiarle el color...
Graciasssss

KarlanKas · #2 (**permalink**) 15/03/2005, 04:05

Me temo que no va a ser posible... el input file tiene muchas limitaciones por lo peligroso que puede ser y es por ello que no permiten el cambiar casi nada de él...

kemie · #3 (**permalink**) 15/03/2005, 04:59

de hecho si hay una manera de hacelo usando css y javascript
http://www.quirksmode.org/dom/inputfile.html

wakewakeup · #4 (**permalink**) 15/03/2005, 05:52

Si es el link que he puesto yo pero solo funciona en IE

Remo:Erdosain · #5 (**permalink**) 15/03/2005, 07:20

El ejemplo de Kemie no funciona en Opera 7.54

n2h · #6 (**permalink**) 15/03/2005, 09:25

Te aconsejo, dejarlo como esta, si alguien se queja de que no esta en su idioma, es culpa suya por no configurar correctamente a su navegador!

Exitos!

wakewakeup · #7 (**permalink**) 15/03/2005, 09:31

ein? no se si soy yo el despistado pero que tiene que ver el idioma en este post?

n2h · #8 (**permalink**) 15/03/2005, 09:38

Fijate que si entras con un browser que tenga el idioma en ingles, el boton dice "Browse", si esta en español, "Examinar", y asi sucesivamente. Es otra variable que esta fuera de nuestro control.

Salutes, despistado! =P

Zerjillo · #9 (**permalink**) 15/03/2005, 10:10

Probablemente no solo quiere cambiar el idioma, sino el aspecto (color, bordes, etc).

Como ya te han comentado, no se puede hacer de manera compatible, y lo que es más, es peligroso hacerlo, así que mejor lo dejas como está (aunque desentone con tu web).

Un saludo

Zerjillo

wakewakeup · #10 (**permalink**) 15/03/2005, 11:22

Ah eso es el idioma es lo de menos era el color. pero si no hay forma pues asi se queda. Gracias de todos modos a los que han contestado.

derkenuke · #11 (**permalink**) 15/03/2005, 11:41

Una solucion bastante penosa que se me ha ocurrido, inexacta, pero que consigue independizar el campo de texto del boton.. y tal vez retocando algo.. quiza mejore:

Código PHP:

  <input type="file" id="explorador" style="width:500px; position:absolute;"> 
<input type="text" id="explo_caja" style="position: absolute;"> 
 
<script> 
elExplo=document.getElementById("explorador"); 
elExplo_caja=document.getElementById("explo_caja"); 
elExplo.onchange=function() { 
    elExplo.click(); 
    elExplo_caja.value=elExplo.value; 
} 
</script> 
 
<style> 
#explo_caja { 
    border: solid 1px red; 
    font-size:10px; 
    font-family:tahoma; 
    width:400px; height:21px; 
} 
</style>

(teniendo en cuenta que el boton ocupa 100px...)

Lo he conseguido hacer tambien personalizacion completa, pero solo para IE por el metodo click().

Enfin, algo igual sacamos entre todos.

Kati · #12 (**permalink**) 19/10/2007, 11:00

Hola,

Encontré este post, dice que si se puede hacer el cambio de ese botón feito.

Aun no tengo 30 post publicados y no puedo colocar urls, asi que seré creativa:
codigoplus (.) com /foro/showtopic/470/poner-estilo-a-input-file

Recién lo voy a probar porque también tenía este problemita

Quixot · #13 (**permalink**) 13/09/2012, 04:13

Hola, bueno yo le he hecho asín y parece funcionar

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type="text/css">
#NombreArchivo { 
border: solid 1px red; 
font-size:10px; 
font-family:tahoma; 
width:300px;
height:21px;
position:absolute;
margin-top:5.5px;}
input.file {
height:34px;
margin-top:5px;
width:399px;
position: absolute;
text-align: right;
-moz-opacity:0 ;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index: 2;}
</style>
</head>
<body>
<form action="#" name="formulario"/>
<input type="file" id="archivo" class="file"> 
<input type="text" id="NombreArchivo">
<img src="imagenes/examinar2.png" width="99" height="34" style="margin-left:304px"/></form>
</body>
</html>
<script> 
Revisor=document.getElementById("archivo"); 
ContenedorNombre=document.getElementById("NombreArchivo"); 
Revisor.onchange=function() { 
ContenedorNombre.value=Revisor.value.replace(/fakepath/gi,"..");}
</script>

Quixot · #14 (**permalink**) 13/09/2012, 13:19

En algunos exploradores cuando tienes que validar el formulario desde el servidor al retroceder de página no te respeta el nombre del archivo por lo que he añadido una pequeña modificación.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type="text/css">
#NombreArchivo { 
border: solid 1px red; 
font-size:10px; 
font-family:tahoma; 
width:300px;
height:21px;
position:absolute;
margin-top:5.5px;}
input.file {
height:34px;
margin-top:5px;
width:399px;
position: absolute;
text-align: right;
-moz-opacity:0 ;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index: 2;}
</style>
</head>
<body onload="ActualizaNombreArchivo();">
<form action="#" name="formulario"/>
<input type="file" id="archivo" class="file"> 
<input type="text" id="NombreArchivo">
<img src="imagenes/examinar2.png" width="99" height="34" style="margin-left:304px"/></form>
</body>
</html>
<script> 
Revisor=document.getElementById("archivo"); 
ContenedorNombre=document.getElementById("NombreArchivo"); 
Revisor.onchange=function() {
ContenedorNombre.value=Revisor.value.replace(/fakepath/gi,'..');}
/*USAR EN <body onload="ActualizaNombreArchivo();"> PARA ACTUALIZAR NOMBRE DEL ARCHIVO*/
function ActualizaNombreArchivo(){
ContenedorNombre.value=Revisor.value.replace(/fakepath/gi,'..');}
</script>

Como pongo en la anotación hay que poner la etiqueta body de la siguiente forma <body onload="ActualizaNombreArchivo();"> de esta manera al retroceder al cargar la página refresca el nombre del archivo sea el explorador que sea.

SALUDOS!!

gbmcarlos · #15 (**permalink**) 04/02/2013, 13:13

Yo propongo esto...

Código HTML:

Ver original<input type="file" name="userfile" style="display:none;" id="botonFileReal">
<input type="button" value="Subir archivo" onclick="document.getElementById('botonFileReal').click();" style="">

Al botón normal le puedes dar el aspecto que quieres, y al pulsarlo saldrá la ventana de seleccionar archivo del botón file que no se ve, y el value del archivo seleccionado se guardara en este último.