El botón dentro del campo de entrada de archivos no funciona en Firefox

Me gustaría tener un campo de input archivo con estilo en mi página y, por lo tanto, ponerlo dentro de un button que cubra por completo y lo haga invisible configurando su opacidad en 0.

Este enfoque funciona bastante bien en la última versión de Chrome, pero Firefox (e IE) no abrirán el diálogo de archivo al hacer clic en el botón:

http://jsfiddle.net/ch8xxvez/3/

  

El mismo código funciona si reemplazo el elemento del button con un div pero me gustaría saber si hay una manera de hacer que esto funcione con la etiqueta del button en las últimas versiones de IE (> = 10), FF, Chrome & Borde.

Los elementos de entrada no están permitidos dentro de los elementos del botón en HTML.

Escriba HTML válido en lugar de depender de la recuperación de errores consistente.

Haga el botón e ingrese los elementos hermanos y luego colóquelos dentro de un contenedor (como un div).

intentalo

https://jsfiddle.net/DeivissonSedrez/0z6mq5yk/1/

 
Upload button

Puse la entrada dentro de un div e hice que un div pareciera un botón con css

Trabajaron en mis pruebas en IE, FF y Chrome

Espero que ayude

De acuerdo con la especificación W3 de la etiqueta BUTTON , no puede insertar las siguientes tags dentro de una etiqueta :

  • UN
  • ENTRADA
  • SELECCIONAR
  • TEXTAREA
  • ETIQUETA
  • BOTÓN
  • FIELDSET

Sin embargo, todas las demás tags en bloque y en línea están permitidas.

No estoy seguro de que pueda hacer esto, ya que la especificación W3C dice que no puede tener contenido interactivo (es decir, contenido clicable) dentro de un botón.

Modelo de contenido: redacción de contenido, pero no debe haber descendiente de contenido interactivo.

Esta pregunta al menos en contexto también es un posible duplicado de esto de la cual la respuesta aquí está acreditada.

No es válido tener una dentro de un . Considere ponerlo dentro de una lugar, o un con un manejador de clics y CSS adecuado o use tags de anclaje.