Estoy intentando 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.HTML File upload field style
¿Alguna idea de cómo 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 los archivos, puede usar el selector de entrada [type = file] en los archivos css. Por ejemplo:
input[type=file] { background-color: red; }
Si lo que quiere decir es el cuadro de diálogo de selección de archivo, creo que es el navegador/OS dependiente y hay pocas (si los hay) que puede hacer al respecto.
He aquí algunos enlaces que he encontrado:
One Extra Pixel Article (look for the file input styling section)
he llegado en 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.
puedes trabajar usando, por ejemplo, el método de Furuno, pero ten en cuenta que el comportamiento será irregular y muy diferente en las plataformas/navegadores.
This cabrían para su requisito.
Si está utilizando jQuery, echar un vistazo a este plugin - https://github.com/ajaxray/bootstrap-file-field
Este pequeño plug-in mostrará el campo de entrada de archivo como un botón de arranque (con clases configurables) y mostrará los nombres de archivos seleccionados (o errores de selección hermosamente.
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.