Estilo de campo de carga de archivo HTML

Intento crear un campo de carga de archivos que tenga un poco de estilo, pero parece que tengo problemas para encontrar ejemplos de esto. Sé que parte de la razón es que el campo en sí varía de un navegador a otro.

¿Alguna idea de como hacer esto? ¿O hay una forma de hacerlo sin usar un elemento de archivo de un formulario que se pueda diseñar?

Si lo que quiere decir es el campo de texto para los nombres de archivo, puede usar el selector de entrada [type = file] en los archivos css. Por ejemplo :

input[type=file] { background-color: red; } 

Si lo que quieres decir es el cuadro de diálogo de selección de archivos, creo que depende del navegador / sistema operativo y hay poco (si hay alguno) que puedas hacer al respecto.

He llegado a este problema antes. Desafortunadamente, las cargas de archivos son casi imposibles de diseñar consistentemente en todos los navegadores. A partir de CSS 2, creo que el estándar W3C específicamente deja el comportamiento indefinido, piense en cuántas maneras tendría que implementarse en diferentes plataformas. Firefox, por ejemplo, genera un botón anónimo y elementos de entrada dentro del elemento de carga de archivos que solo heredan algunas de las propiedades que configuras en el elemento de carga.

Puede hacer que algunos funcionen utilizando, por ejemplo, el método de Furuno, pero sepa que el comportamiento será irregular y diferirá ampliamente en las plataformas / navegadores.

Aquí hay algunos enlaces que encontré:

Artículo de QuirksMode

Un artículo extra Pixel (busque la sección de estilo de entrada de archivo)

Esto cabría para su requisito.

Si está utilizando jQuery, eche un vistazo a este complemento – https://github.com/ajaxray/bootstrap-file-field

Este pequeño complemento mostrará el campo de entrada del archivo como un botón de arranque (con clases configurables) y mostrará los nombres de los archivos seleccionados (o errores de selección) maravillosamente.

Además, puede establecer diversas restricciones utilizando atributos de datos simples o configuraciones JS.
e, g, data-file-types="image/jpeg,image/png" restringirá la selección de tipos de archivos excepto las imágenes jpg y png.