Aplicar CSS a boton de un input de tipo File

ya ... pero me toca los webs que tanta pu*a compatibilidad con los standares del css, pa luego tener tan poca consistencia ... joder que un boton es un boton ... y punto ....

vale que antes habia que hacer aún más trequiñuelas, y reinventar las tablas ... pero co*o ya que estamos ... estamos no?

... ruscus !!! que se me va ... ;)

nadie dijo que fuera facil, solo que era posible, amigacho ;-)

a veces es desconcertante ....

Si tenemos un elemento Button, al cual le podemos aplicar propiedades Background, border, etc.. . Por que luego tenemos un boton en un elemento Input "file" que representa que no es un boton que que es otra cosa estraña sin definir claramente :(, que está vinculada al input text pero se comporta como un boton pero sin envargo hay que aplicarle el diseño desde el input text ... y ambos cojen ese diseño ... y mezclado con tomate y una pizca de sal sale un gazpacho "puta madre" ;)

Pq para darle un formato diferente a un select, con esos atributos tan bonitos border, padding etc... hay que pasar por Tanger, girar a la izquierda, saltarse el semaforo en rojo, para acabar con un rectangulo montado con un gamba y una anchoa del norte.

:(

:D :D :D

no estamos nuca contentos verdad?

... me referia a la flechita :?

;)

coño que vagos por no buscar, en finnnnnnn ahi va:

<code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;style type="text/css"&gt;
&lt;!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
.dropb {
font: normal 9px "Small Fonts", VT100, Arial, Helvetica;
color: #505050;
border: 2px solid #c0c0c0;
width: 115px;
; background-color: #FFCC33}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body bgcolor="#FFFFFF" text="#000000"&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;div style="position:relative;margin-right:7px;width:117px;height:18px;border:1px solid #c0c0c0;background-color:#FFFFFF"&gt;
&lt;div style="position: absolute;left:0px;top:-1px;width:115px;height:17px;clip:rect(2,113,15,2);"&gt;
&lt;SELECT class="dropb"&gt;
&lt;option value="" SELECTED&gt;FRIENDLY LINKS
&lt;option value=""&gt;- - - - - - - - - - - - - - - - - - - - - - - - - -
&lt;option value="http://www.hartum.com"&gt;HARTUM
&lt;option value="http://www.copyrightmagazine.com"&gt;COPYRIGHTMAGAZINE
&lt;option value="http://www.publircidad.com"&gt;PUBLIRCIDAD
&lt;option value="http://www.e-site-es.com"&gt;E-SITE
&lt;option value="http://www.creatiu.com"&gt;CREATIU
&lt;option value="http://www.offf.org"&gt;OFFF
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code>

canta HARTUM .... !!!

canta de una vez !!! :D

si alguien tiene conocimientos sobre como cambiar el aspecto de esos jodidos botones "poco usuales" como el radio button, checkboxes, etc.. que hable ahorarrrrrr o calle para siempre, yo se como hacer para cambiar el aspecto de las listas desplegables, lo "robe" de la antigua pagina de microbians, pero luego me dio su permiso, menos mal. en algun post anterior lo he puesto alguna vez.

Pues no tengo muy claro de que sea seguro del sistema operativo, porque creo recordar que a mi al principio tampoco se me veía bien en FireFox (con mi XP), y si te soy sincero no sé cómo llegué a arreglarlo ... de todas formas yo creo que ese tipo de "botones", no demasiado corrientes pueden ser fuente de "diferencias" ... yo no sería muy estricto con el diseño en estas cosas ...

jajajaja ... que chulo el regalito, no mi brother no me dijo nada ... muchas gracias, a ver si hago algo chulo con él

Thnks!!

Entonces, se podría decir que el fairfos lo renderiza distinto en win2k que con el xp, no? juer, de qué cosas se entera uno y que freak se puede llegar a ser, madre mía, me voy a la calle pero ya...

Molaría que solucionaran esto para el css3, ¿habeis leído algo? Yo antes me he dado una vuelta por el w3c pero no he visto nada...

Offtopic: Orange, tengo un regalín para tí desde hace tiempo, no sé si te dijo algo tu hermano, te lo mando al meil, ok?

Pues el problema es que en los dos sitios que lo utilizo son sendos gestores de contenidos, con acceso restringido, evidentemente ... de todas formas no utilizo nada raro, simplemente el codigo que puse ahi ....

Te pongo una captura de tu pagina desde mi FireFox 0.8, yo lo veo con los estilos que has declarado ...
https://www.domestika.org/orange/foro/input_file2.gif

A mi me pasa igual. Es posible que sea por el skin de orange

Bueno, pues parece que vamos solucionando el poblema, porque tu captura pinta muy muy bien!

¿Podrías colgar eso algún sitio plis? Es que estoy interesado en el tema y a mi no me rula: he pegado tu código aquí, incluida la parte repetida en negrita :P , y así es como se ve a través de mi Firefox0.8 e IE6 respectivamente:

http://www.denegro.com/dmstk/file_input.gif

(con windows2000)

Con respecto a los check y los radios, sí que he visto más ejemplos (en el skin del foro sin ir más lejos), busca en google y seguro que encuentras algo.

:D

Esa captura es precisamente del IE6 ....

El aspecto de las flechas es por mi skin del XP ... si quieres te lo paso también, aunque no sé muy bien cómo vas a hacer para que se lo instale el usuario

:P

:D :D :D

en IE6 tambien ?
Pos no se ... algo tendré mal ...

Como cambias el aspecto de la flecha del select ? :?

Y el check y el radiobutton ?

8)~

geminis
"Solo cambia el fondo de la caja de texto del imput file."

Perdona pero no ....

https://www.domestika.org/orange/foro/input_file.gif

;)

Es que es un solo elemento ... no dos, con lo cual meterle dos estilos es complicado ....

Si el asunto es tan vital para su diseño puedes tratar de emularlo con javascript
(pero no me preguntes como porque no tengo ni idea)

<fieldset>Perdona pero no: background-color: #F7F7F7;

</fieldset>

Solo cambia el fondo de la caja de texto del imput file.

Eso es lo que me ocurria antes. Precisamente no conseguia cambiar el boton del tipo "file", pq yo interpretaba que era un "buttom" pero no es así forma parte del propio elemento <em>input tipo file</em> ... así que inicialmente no se pueden separar y si pones bordes los pones a la caja de texto del input y al boton del tipo file todo a la vez. :(

No lo sé ... prueba ... igual tendrías que diferenciar las definiciones de BUTTON e INPUT o alguna cosa así

y podria poner el texto sin borde y el boton con borde (del conjunto "file")

creo que se refiere a poder poner algo tipo icono o imagen ...
Pero bueno a mi ya me sirve ...
No me furulaba pq el puñetero boton va vinculado a la caja de texto del input y se me ha liao la cabesssa. ;)

Perdona pero no: background-color: #F7F7F7;

orange

A mi esto me funciona en FireFox 0.8 y Explorer 6[...]

Claroo, eso funciona para el campo de texto y el borde del botón, pero éste no deja de tener el color feillo de un botón de sistema...

Orange pues tu código me funciona correctamente ... :D veo una luz, gracias !!!

KgoEntooooo !!! :? voy a ver que pasa con mi código ... pero la unica diferencia es que no estan agrupados por motivos del diseño ... pero voy a revisrlo a ver que carajo puede ser, pq no entiendo que los inputs y botones que no son "file" cojan la regla.

... ;)

A mi esto me funciona en FireFox 0.8 y Explorer 6

select, input, button, textarea, submit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding: 2px;
border: 1px solid #000;
background-color: #F7F7F7;
color: #000;
}

..............

&lt;input type="file" name="flash" /&gt;

Gracias !! ... el truco está "Grasioso de cojones" :D pero no es para uso exclusivo en IE.

Hola, yo estuve bastante tiempo buscando la manera de hacerlo y, bueno, es un tema complicado, al final la solución con un 'mayor nivel de customización' es un truqui con javascript, que consiste en:

-Crear un input type="file" y esconderlo
-Crear un campo de texto y un botón tan molones como queramos
-Mediante javascript, hacer que
a) Al apretar el botón, se ejecute el inputtypefile
b) Al escojer un archivo, aparezca la ruta del archivo en el campo de texto.

<code>&lt;input type="file" name="file" style="display: none" onchange="this.form.showfile.value=this.value"&gt;

&lt;input type="text" name="showfile" class="myInputClass"&gt;

&lt;input type="button" value="Buscar..." onclick="this.form.file.click()" class="myButtonClass"&gt;</code>

Por motivos de seguridad, el resto de navegadores no deja acceder al inputtypefile desde otro botón, así que nos tenemos que conformar con que el campo de texto del inputtypefile coja el aspecto que le demos, y el botón coja sólo la fuente u otras guarrerias varias.

Conclusión: si es para IE te vale mi truco del almendruco, y si no, déjalo estar o go flash!