¿Podemos cambiar <input type = "file"> style?

Question

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

HTML, form id = forma

<input class="upload_file" type="file" id="file" name="file" /> 

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

Answer 1

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

Lo que sugeriría, sin embargo, es que utilizó algo más flexible, como swfUpload, que le permite cambiar los montantes, y también verificar el tamaño del archivo antes de cargarlo.

Algunos ejemplos ordenadas de que se pueden encontrar here

la esperanza que esto le ayuda

Answer 2

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

Answer 3

En realidad, usted puede!

Tienes que hacerlo con la Biblioteca SI.Files.

Here es un buen artículo sobre como se hace en los detalles:

buena suerte!

Answer 4

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

Answer 5

¿Por qué simplemente no pones el css en la pantalla: ninguno y luego disparas este botón con otro botón? Esto puede hacerse fácilmente con javascript y luego se puede estilizar el botón de sí mismo por completo

Aquí está un ejemplo de cómo activar un botón con otro, pero esto es sólo una de muchas formas: One button firing another buttons click event

Answer 6

Bhee, sólo tiene que añadir las definiciones CSS para la etiqueta hTML de entrada:

como:

<select style:"...whatYoureadBelow..."></select> 

o

<input style:"...whatYoureadBelow..." /> 

definiciones

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í podrás conseguir lo que tiene en facebook o en otra parte;)

Answer 7

mejor truco nunca.Entrada archivo HTML:

<input type="file" class="hide" id='inputFile' /> 
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a> 

usando jQuery:

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