Cannot click input element within button element

Issue

Take a look at the below markup & fiddle: http://jsfiddle.net/minlare/oh1mg7j6/

<button id="button" type="button">
    <span id="test" style="background:pink;">test element</span>
    Add File
    <input type="file" name="file" multiple="multiple" id="upload">
</button>

In Chrome, each element within the button can be selected through the developer console and js click events are delegated.

In Firefox/IE you cannot select the child elements or pickup js click events.

Is there a way around this in Firefox/IE?

Solution

It is not suggested to use elements inside button and so you can use "div" instead of "button" which will make it working both in mozilla and chrome. Check below

<div id="button" type="button">
    <span id="test" style="background:pink;">test element</span>
    Add File
    <input type="file" name="file" multiple="multiple" id="upload">
</div>

http://jsfiddle.net/oh1mg7j6/8/

Answered By - Sridhar Narasimhan