“for” attribute not working inside button for Firefox

问题

I want to customize the input element by changing the text to "Choose file ..." and hide the file's name. Also if a user click the button a window is opened for user to choose file. The code is

<button>
 <label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">

With Chrome, if I click the button a window is popped up for me to choose the file. However it doesn't work with Firefox and IE. Do you know how can I make it work for all three browsers? Thank you.

回答1:

The label tag does not work for buttons. It is by and large used with radio buttons. The below should do what you are looking for:

<button id="btnFile" onclick="upload.click();">
  Choose file ...
</button>
<input type="file" id="upload" style="display:none">

回答2:

Your HTML is invalid. A label cannot be a descendant of a button.

Remove the button:

<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">

(Tested in Firefox. I don't have a copy of IE to hand.)

If you want something that looks like a button, then style it that way with CSS.

来源：https://stackoverflow.com/questions/41048435/for-attribute-not-working-inside-button-for-firefox