The file input field inside the button does not work in Firefox.

Question

I would like to have an input text box on my page and therefore place it inside a button , which it completely closes, and made it invisible by setting opactiy to 0.

This approach works very well in the latest version of Chrome, but Firefox (and IE) will not open the file dialog when the button is clicked:

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

 <button style="width: 100px; height: 100px; position: relative;">Upload button <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input> </button> 

The same code works if I replace the button element with a div , but I would really like to know if there is a way to do this work with the button tag in the latest versions of IE (> = 10), FF, Chrome and Edge.

Answer 1

Input elements are not allowed inside button elements in HTML.

Write valid HTML instead depending on sequential error recovery.

Make a button and enter the original elements, and then put them in a container (like a div).

Answer 2

try

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

 <div class="fakeButton">Upload button <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input> </div> <style> .fakeButton{ width: 100px; height: 100px; position: relative; border:1px solid #000; border-radius:3px; text-align:center; font: 15px arial; line-height:90px; box-shadow: inset 0 2px 3px 0 rgba(255,255,255,.3), inset 0 -3px 6px 0 rgba(0,0,0,.2), 0 3px 2px 0 rgba(0,0,0,.2); background-image: -webkit-linear-gradient(#EEEEEE, #D8D8D8 130%); background-image: -moz-linear-gradient(#EEEEEE, #D8D8D8 130%); background-image: -o-linear-gradient(#EEEEEE, #D8D8D8 130%); background-image: linear-gradient(#EEEEEE, #D8D8D8 130%); } </style> 

I put the input inside a div and made the div look like a button with css

They worked in my tests on IE, FF, and Chrome.

I hope this helps

Answer 3

According to the W3 specification of the BUTTON tag, you cannot insert the following tags inside the <button> :

• A
• ENTRANCE
• SELECT
• TEXTAREA
• LABEL
• Button
• FIELDSET

However, all other blocks and inline tags are allowed.

Answer 4

You cannot have an <input> inside a <button> . Consider placing it inside a <label> or <span> using a click handler and appropriate CSS, or using anchor tags.

Answer 5

I'm not sure you can do this, since the W3C specification states that there cannot be interactive content inside the button (that is, content that can be clicked on).

Content Model: Phrasing content, but there should not be a descendant of interactive content.

This question, at least in context, is also a possible duplicate of this question, the answer to which is accredited here.