Foros del Web » Creando para Internet » CSS »

Cambiar el ancho de un input:file

Estas en el tema de Cambiar el ancho de un input:file en el foro de CSS en Foros del Web. Hola!, He tratado de cambiar el tamaño "width", de lo input tipo file pero no paréce responder adecuadamente por que se ve que el tamaño ...
  #1 (permalink)  
Antiguo 15/09/2011, 08:54
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Cambiar el ancho de un input:file

Hola!,

He tratado de cambiar el tamaño "width", de lo input tipo file pero no paréce responder adecuadamente por que se ve que el tamaño altera a los demás elementos pero el input sigue igual como si estuviese alargandose invisiblemente.
¿Como puedo agregar un valor width que funcione a un input:file?

Saludos y gracias.
  #2 (permalink)  
Antiguo 15/09/2011, 11:50
Avatar de webfreelance  
Fecha de Ingreso: septiembre-2011
Ubicación: España
Mensajes: 11
Antigüedad: 10 años, 2 meses
Puntos: 3
Respuesta: Cambiar el ancho de un input:file

Debes darle un size="" con el valor que quieras. Ejemplo: size="50". Así se te alarga. Se lo das dentro de la propia etiqueta input.

Saludos.
  #3 (permalink)  
Antiguo 15/09/2011, 12:36
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Hola webfreelance, gracias pero ya sabía eso, lo que quiero es asignarle una medida en pixeles, nisiquiera se que medida maneja "size" jeje, por eso necesito un width funcional en pixeles, saludos.
  #4 (permalink)  
Antiguo 15/09/2011, 12:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 9 meses
Puntos: 1146
Respuesta: Cambiar el ancho de un input:file

seguramente tienes algo con lo que esta entrando en conflicto, porque si yo coloco en mi CSS

Código CSS:
Ver original
  1. input[type="file"]{background:#fe0;width:600px;}
el ancho se ve afectado perfectamente, claro considerando que incluye también el botón "examinar"

revisa bien tu código HTML y CSS algo debes de tener que no te deja aplicar ese ancho que tanto deseas
  #5 (permalink)  
Antiguo 15/09/2011, 14:15
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Chile
Mensajes: 28
Antigüedad: 10 años, 6 meses
Puntos: 3
Respuesta: Cambiar el ancho de un input:file

puedes hacerlo también directamente con una etiqueta style sumatoria.

<input:file style="width:300px" />

por ej.
  #6 (permalink)  
Antiguo 15/09/2011, 14:45
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Ya intenté de las dos formas pero no funciona. Me di cuenta que solo funciona en IE, pero en firefox, chrome, opera y safari, no funciona.
  #7 (permalink)  
Antiguo 15/09/2011, 14:51
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Chile
Mensajes: 28
Antigüedad: 10 años, 6 meses
Puntos: 3
Respuesta: Cambiar el ancho de un input:file

probaste dandole un
Cita:
width:xxx px !important
?
  #8 (permalink)  
Antiguo 15/09/2011, 16:06
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Ya lo probé y es lo mísmo, mira abrelo tu con un navegador distinto a IE y verás el problema.
  #9 (permalink)  
Antiguo 15/09/2011, 18:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 5 meses
Puntos: 1567
Respuesta: Cambiar el ancho de un input:file

E más o menos que imposible, y que se vea bien en todos los navegadores, personalizarlo requiere tambien de javascript. Yo en lo personal uso esto, quizás te sirva

http://foros.emprear.com/file-input/
Advierto que el upload no está funcionando, es una demo nomas
Es una versión mejorada de esto otro
http://www.kethinov.com/custuploadblock.php

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 16/09/2011, 13:53
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Hola emprear, gracias pero ya intenté hacer uno con javascript pero el problema esque opera no deja utilizar el evento "click" a menos que sea el click del usuario, pero como el input:file está invisible, el usuario no puede dar click, es decir, debe de dar click al input:file "falso" para así ejecutar un script que haga "click" al input:file original, pero en opera no funciona y necesito que funcione en todos los browsers, saludos.
  #11 (permalink)  
Antiguo 16/09/2011, 14:19
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 5 meses
Puntos: 1567
Respuesta: Cambiar el ancho de un input:file

Cita:
Iniciado por IXtremeLT Ver Mensaje
Hola emprear, gracias pero ya intenté hacer uno con javascript pero el problema esque opera no deja utilizar el evento "click" a menos que sea el click del usuario, pero como el input:file está invisible, el usuario no puede dar click, es decir, debe de dar click al input:file "falso" para así ejecutar un script que haga "click" al input:file original, pero en opera no funciona y necesito que funcione en todos los browsers, saludos.
No entiendo cual es el click que no funciona, y que otro click habría aparte del "click del usuario", la script que te pasé funciona en todos los navegadores que se indican, incluso en opera, pero es necesario ser muy preciso en el area "clickeable", ahi le hice una pequeña corrección a la script para que sea más comodo, también se puede adaptar poniendo una image de mayor tamaño.
Pero funcionar, funciona perfectamnete

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 18/09/2011, 23:30
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Ok gracias, veré que és lo que pasa, si te creo nadamás deja lo pruebo, grax y saludos.
  #13 (permalink)  
Antiguo 18/09/2011, 23:33
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 5 meses
Puntos: 32
Respuesta: Cambiar el ancho de un input:file

Ok ya lo probé de nuevo y si funciona, no se que paso la otra vez jeje. Ya ví tu script y es por eso que te funciona correctamente:
Código HTML:
Ver original
  1. <input id="file" type="file" style="visibility:hidden;position:absolute" />
  2. <div onclick="$('file').click()">Click aquí para subir un archivo</div>
Y esto funciona bien con todos los browsers excepto en opera, supongo que es por cuestiones de seguridad("que tontería... en mi opinión: ni que fuera peligroso o fastidioso el uso de esta técnica"). Gracias emprear por tu valioso script!, saludotes.

Última edición por IXtremeLT; 18/09/2011 a las 23:47

Etiquetas: ancho, tamaño
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 07:05.