¿Podemos cambiar style?

Traté de cambiar el formulario HTML, archivo de tipo de entrada. Aquí está mi código:

HTML, forma id = forma

 

.CSS

 I tried both: .upload_button{ background: url('../images/upload_btn_bg.png') no-repeat; width: 200px; height: 40px; } #form input[type=file]{ background: url('../images/upload_btn_bg.png') no-repeat; width: 200px; height: 40px; } 

Ninguno de los dos métodos funciona. Vi desde algún sitio web, como Facebook, youtube, google o twitter, tienen un estilo diferente. Me pregunto cómo lo hacen.

No se puede hacer nada con el archivo de tipo de entrada (que no sean enormes hacks). Sé que esto suena horrible, pero los estándares web todavía no han encontrado una solución para eso.

Sin embargo, lo que sugeriría es que haya usado algo más flexible, como swfUpload , que le permite cambiar stiles, y también verificar el tamaño del archivo antes de cargarlo.

Algunos buenos ejemplos de esto se pueden encontrar aquí

Espero que esto te ayude

Por ejemplo, prueba esta variante http://www.quirksmode.org/dom/inputfile.html

Mejor hack jamás. Archivo de entrada HTML:

  Browse File 

usando jQuery:

 $('#triggerFile').on('click', function(e){ e.preventDefault() $("#inputFile").trigger('click') }); 

¿Por qué no simplemente pones el CSS para mostrar: ninguno y luego disparas este botón con otro botón? Esto se puede hacer fácilmente con javascript y luego puedes personalizar el botón por completo

A continuación, se muestra un ejemplo de cómo activar un botón con otro, pero esta es solo una de varias maneras: un botón dispara otro evento de clic de botones

Puede cambiar el tamaño de fuente para la altura o seguir esta url http://www.quirksmode.org/dom/inputfile.html (que es básicamente lo que hago en mis proyectos).

¡En realidad puedes!

Tienes que hacerlo con la biblioteca SI.Files.

Aquí hay un buen artículo sobre cómo se hace en detalle:

¡Buena suerte!

Bhee, solo agrega definiciones CSS a tu etiqueta de entrada html:

me gusta:

  

o

  

Definiciones de CSS:

 border:none; background-image:url('somePathToImage'); background-repeat:no-repeat; //those things below adjust according to your background image size width:XXpx; height:XXpx; 

Así obtendrás lo que tienes en Facebook o en otro lugar;)