Cambiar el ancho de un input:file

[IXtremeLT]

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.

[webfreelance]

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.

[IXtremeLT]

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.

[ArturoGallegos]

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

Código CSS:

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

[venommist]

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

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

por ej.

[IXtremeLT]

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.

[venommist]

probaste dandole un

width:xxx px !important

?

[IXtremeLT]

Ya lo probé y es lo mísmo, mira abrelo tu con un navegador distinto a IE y verás el problema.

[emprear]

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

[IXtremeLT]

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.

[emprear]

Iniciado por IXtremeLT

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

[IXtremeLT]

Ok gracias, veré que és lo que pasa, si te creo nadamás deja lo pruebo, grax y saludos.

[IXtremeLT]

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:

<input id="file" type="file" style="visibility:hidden;position:absolute" />
<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.