Foros de daboweb

MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: DocBrown en 01 de Diciembre de 2007, 05:22:36 pm

Título: CSS de los <input type="file" />
Publicado por: DocBrown en 01 de Diciembre de 2007, 05:22:36 pm
Los <input type="file" /> me están toreando con los css. La cuestión es que directamente pasan de ellos (al menos en firefox y safari). Lo que quiero es simplemente definir un borde y un ancho y alto para mantener la estética del resto de los formularios. Ya sería la ostia poder darle un estilo al botón pero por lo que leí por ahí va a ser que no.

Lo más parecido que encontré (http://www.quirksmode.org/dom/inputfile.html) es una movida surrealista de poner una capa debajo con un input normal y poner la opacidad del file a 0. ¿Alguien conoce alguna solución menos "extravagante"?
Título: Re: CSS de los <input type="file" />
Publicado por: Liamngls en 06 de Diciembre de 2007, 07:14:33 pm
No sé si es lo mismo, ni si te servirá ni si nada, pero mira esto a ver: http://daniblog.com/2007/09/13/aplicandole-estilo-al-elemento-input-typefile/
Título: Re: CSS de los <input type="file" />
Publicado por: DocBrown en 08 de Diciembre de 2007, 01:41:35 am
Gracias Liam. Es lo mismo que había encontrado. Parece ser que no hay otra solución.
Una sorpresa que me llevé es que cuando lo vi con la mierda del explorer lo mostraba de puta madre sin hacer ninguna cosa rara. Curioso...
Título: Re: CSS de los <input type="file" />
Publicado por: Liamngls en 08 de Diciembre de 2007, 01:51:37 am
Gracias Liam. Es lo mismo que había encontrado. Parece ser que no hay otra solución.
Una sorpresa que me llevé es que cuando lo vi con la mierda del explorer lo mostraba de puta madre sin hacer ninguna cosa rara. Curioso...

¿Lo viste funcionando en alguna página e iba bien con el explorer? Si fuese así seguramente puedas analizar el código de la página con el mítico Ver - Código fuente o mejor incluso con Firefox y alguna extensión para desarrolladores web de esas que te muestran además del código fuente los CSS, .js, etc... Firebug, Webdeveloper o alguna similar.

https://addons.mozilla.org/es-ES/firefox/browse/type:1/cat:4
Título: Re: CSS de los <input type="file" />
Publicado por: DocBrown en 08 de Diciembre de 2007, 06:17:06 pm
No, que va, lo hice yo. Este es el CSS:
Código: [Seleccionar]
input,submit,button{ width:325px; height:20px; border:1px solid #f0eef1;}Firefox pasa directamente de los estilos en los tipo "file" pero Explorer lo muestra respetando el ancho (entre el botón y el cajón de texto), el alto y los colores.

Trabajo con mac y normalmente durante el desarrollo voy viendo el resultado en local con Firefox, y no es hasta que está prácticamente acabado que lo subo a un servidor de prueba y arranco la máquina virtual con Windows y Explorer y pruebo con otros navegadores, por eso te digo que me sorprendió.

La extensión Webdeveloper ya se me hace casi tan fundamental como el teclado o el ratón para un montón de cosas.
Título: Re: CSS de los <input type="file" />
Publicado por: Liamngls en 08 de Diciembre de 2007, 07:17:15 pm
No, que va, lo hice yo. Este es el CSS:
Código: [Seleccionar]
input,submit,button{ width:325px; height:20px; border:1px solid #f0eef1;}

Yo de CSS tampoco es que entienda mucho pero ¿ese código está bien? ¿no debería ser una línea por elemento?

Código: [Seleccionar]
input {width:325px; height:20px; border:1px solid #f0eef1;}
submit {width:325px; height:20px; border:1px solid #f0eef1;}
button {width:325px; height:20px; border:1px solid #f0eef1;}

Y luego llamarlos por tipo ...

Código: [Seleccionar]
<input type="submit"></input><input type="button"></input>
Título: Re: CSS de los <input type="file" />
Publicado por: DocBrown en 10 de Diciembre de 2007, 01:44:57 am
No, no es necesario si quieres aplicar el mismo estilo a varios elementos, de hecho pasó la validación. Si compartes estilos con varios elementos y en uno de ellos quieres una característica distinta, puedes poner otra línea sólo con esa característica. Por cierto me acabo de dar cuenta que estoy gilipollas del culo, los submit y los button son inputs :ciego:

Por cierto, no es necesario poner etiquetas de cierre en los input:
Código: [Seleccionar]
<input type="loquesea" />y listo