Tema: CSS de los <input type="file" />

[DocBrown]

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é 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"?

[Liamngls]

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/

[DocBrown]

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...

[Liamngls]

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

[DocBrown]

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.

[Liamngls]

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>

[DocBrown]

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

Por cierto, no es necesario poner etiquetas de cierre en los input:

Código: [Seleccionar]

<input type="loquesea" />y listo