¿Cómo puedo diseñar un campo de entrada de archivo en Firefox?

Question

Actualmente estoy haciendo la parte delantera de un sitio con muchísimos formularios, todos con un estilo y aspecto bonito en IE, pero acabo de notar que en Firefox los campos de entrada de archivos no responden a ninguno de mis estilos, todos los otros tipos de campos de entrada están bien. Lo he comprobado en Firebug y está asociando los estilos correctos, pero no cambia la apariencia.

Si esto no es un pedo cerebral completo en mi nombre, ¿se trata de un problema conocido en Firefox? Y si es así, ¿cómo es que nunca lo había notado?

Aquí hay un ejemplo del código.

CSS:

form.CollateralForm input, 
form.CollateralForm textarea 
{ 
    width:300px; 
    font-size:1em; 
    border: solid 1px #979797; 
    font-family: Verdana, Helvetica, Sans-Serif; 
} 

HTML:

<form method="bla" action="blah" class="CollateralForm"> 
    <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" /> 
</form> 

También he intentado aplicar una clase a ella, pero que no funciona bien.

Answer 1

código de uso de trucos (#) delante del atributo de clase CSS decir:

form.CollateralForm input, 
form.CollateralForm textarea 
{ 
    width:300px; //for firefox 
    #width:200px; //for IE7 
    _width:100px; //for IE6 
    font-size:1em; 
    border: solid 1px #979797; 
    font-family: Verdana, Helvetica, Sans-Serif; 
} 

Answer 2

Firefox puede ser hackeado con el atributo tamaño de entrada HTML: size = "40" mientras se utiliza un ancho de CSS para controlar todo el ancho del campo + botón en el diseño

Answer 3

Muchas de las respuestas anteriores son bastante antiguas. En 2013 existe una solución mucho más simple: casi todos los navegadores actuales ...

• Chrome
• IE
• Safari
• Firefox con unas pocas líneas fijar

pase a través haga clic en eventos de las etiquetas. Inténtelo aquí: http://jsfiddle.net/rvCBX/7/

• Estilo del <label> sin embargo usted desea que su carga de archivos que sea.
• Establecer for="someid" atributo en la etiqueta
• Crear un elemento <input id="someid">, que está oculto.

Al hacer clic en la etiqueta pasará el evento a la carga del archivo en Chrome, IE y Safari.

Firefox requires a very small workaround, which is detailed in this answer.

Answer 4

El plugin Customformsjs soluciona este problema en su clase de módulo Archivo.
http://customformsjs.com/doc/File.html

http://customformsjs.com/doc/File.js.html

Basicaly que hacen posible tipo de campos de entrada de archivos de estilo con algunas restricciones. Funciona envolviéndolo en un contenedor y haciéndolo transparente para que haga clic en él.La página de demostración muestra en acción

Answer 5

Digamos que usted tiene su entrada:

<input style="display:none" id="js-choose-file" type="file"> 

botón Crear una falsa usando jQuery.

<a id="js-choose-computer" href="javascript:void(0);">From Computer</a> 

Aprieta el botón de arriba como quieras. Luego:

$("#js-choose-computer").on("click", function() { 
    $("#js-choose-file").click(); 
    return false; 
});