Cannot click input element within button element

Question

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?

Answer 1

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/

Answer 2

It's not a good style.Even I can say that this way is not right.you can set "click" event on your button to click the input.so if you want to hide input[file] element,but leave it clickable you can do like I said.Here is a very good link for events docs and examples.

http://www.w3docs.com/learn-javascript/javascript-events.html