Foros del Web » Creando para Internet » CSS »

Personalizar botón input=file

Estas en el tema de Personalizar botón input=file en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 15/03/2005, 03:21
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
Personalizar botón input=file

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
  #2 (permalink)  
Antiguo 15/03/2005, 04:05
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
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...
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 15/03/2005, 04:59
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
de hecho si hay una manera de hacelo usando css y javascript
http://www.quirksmode.org/dom/inputfile.html
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 15/03/2005, 05:52
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
Si es el link que he puesto yo pero solo funciona en IE
  #5 (permalink)  
Antiguo 15/03/2005, 07:20
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
El ejemplo de Kemie no funciona en Opera 7.54
  #6 (permalink)  
Antiguo 15/03/2005, 09:25
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 13 años, 1 mes
Puntos: 0
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!
  #7 (permalink)  
Antiguo 15/03/2005, 09:31
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
ein? no se si soy yo el despistado pero que tiene que ver el idioma en este post?
  #8 (permalink)  
Antiguo 15/03/2005, 09:38
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 13 años, 1 mes
Puntos: 0
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
  #9 (permalink)  
Antiguo 15/03/2005, 10:10
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 12 años, 10 meses
Puntos: 1
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
  #10 (permalink)  
Antiguo 15/03/2005, 11:22
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 1 mes
Puntos: 1
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.
  #11 (permalink)  
Antiguo 15/03/2005, 11:41
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #12 (permalink)  
Antiguo 19/10/2007, 12:00
 
Fecha de Ingreso: marzo-2004
Ubicación: Lima
Mensajes: 40
Antigüedad: 13 años, 9 meses
Puntos: 0
Re: Personalizar botón input=file

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
__________________
Kati
  #13 (permalink)  
Antiguo 13/09/2012, 05:13
Avatar de Quixot  
Fecha de Ingreso: septiembre-2011
Ubicación: Alicante
Mensajes: 20
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Personalizar botón input=file

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> 

Última edición por Quixot; 13/09/2012 a las 05:33
  #14 (permalink)  
Antiguo 13/09/2012, 14:19
Avatar de Quixot  
Fecha de Ingreso: septiembre-2011
Ubicación: Alicante
Mensajes: 20
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Personalizar botón input=file

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!!
  #15 (permalink)  
Antiguo 04/02/2013, 13:13
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 5 años
Puntos: 0
Respuesta: Personalizar botón input=file

Yo propongo esto...
Código HTML:
Ver original
  1. <input type="file" name="userfile" style="display:none;" id="botonFileReal">
  2. <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.
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 18:32.