<input type = "file"> - custom styles/css

Question

¿Hay alguna forma de que <input type="file"> tenga el mismo aspecto en todos los navegadores que utilizan CSS?

Answer 1

Quirksmode.org tiene un interesante artículo al respecto: http://www.quirksmode.org/dom/inputfile.html

Answer 2

probar esto -

1. Take a la normalidad y la puso en un elemento con position: relative.
2. Para este mismo elemento principal, agregue un normal y una imagen, que tenga los estilos correctos. Coloque estos elementos absolutamente, de modo que ocupen el mismo lugar que el .
3. Establezca el índice z de 2 en el en la parte superior de la entrada/imagen con estilo.
4. Por último, establecer la opacidad de la a 0. La ahora se convierte efectivamente en invisible, y la estilos de entrada/imagen brilla a través, pero todavía puede hacer clic en el botón "Examinar" . Si el botón está posicionado en la parte superior de la imagen, el usuario parece hacer clic en la imagen y obtiene la ventana normal de selección de archivos . (Tenga en cuenta que no puede usar visibilidad: oculto, porque un elemento invisible verdaderamente no se puede cliquear, también, y necesitamos que se pueda hacer clic en él) Hasta aquí el efecto puede ser logrado a través de CSS puro. Sin embargo, falta una característica.
5. Cuando el usuario ha seleccionado un archivo, el campo de entrada visible, falso debe mostrar el camino correcto para este archivo, como normales haría. Es simplemente una cuestión de copiando el nuevo valor del campo de entrada falsa , pero necesitamos JavaScript para hacer esto.

Más detalles - http://www.quirksmode.org/dom/inputfile.html

Answer 3

Usted podría tratar de usar swfupload, un proyecto de código abierto que incorpora un pequeño archivo Flash en la página en lugar de la entrada de archivos ... Se puede utilizar CSS para estilizar el botón que activa la carga del flash como lo desee.

Desventaja: puede ser complicado trabajar con ellos, y por supuesto, los usuarios deben tener flash.

Upside: ¡múltiples archivos se pueden seleccionar a la vez en el cuadro de diálogo de carga!

Answer 4

simplemente puede diseñar su propio botón de entrada de archivo. simplemente configure el atributo CSS de su elemento de entrada en style="display:none" y maneje un evento click en javascript. Lectura adicional: Using hidden file input elements using the click() method

EDITAR: resulta que esto ya no funciona por razones de seguridad. un pequeño truco es simplemente establecer el estilo CSS en visibility:hidden. Aquí está un JSFiddle donde coloco mi campo <input> en algún lugar al final de mi página y desencadené el OpenFileDialog con un elemento <a>.

//html 
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" /> 

//js 
$("#openFile").on("click", function() { 
    //throws an error if browser doesn't support file upload 
    checkFileApiCompatibility(); 

    //opens File Dialog 
    $("#openFileDialog").click(); 
    $("#openFileDialog").on('change', function(){ 
     openFile(this); 
    }); 
});