“用于"属性在Firefox的按钮内不起作用 [英] "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">

使用Chrome，如果我单击按钮，则会弹出一个窗口供我选择文件.但是，它不适用于Firefox和IE.您知道如何使它适用于所有三种浏览器吗?谢谢.

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.

推荐答案

label 标记不适用于按钮.它通常与单选按钮一起使用.以下应该可以满足您的需求:

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">

这篇关于“用于"属性在Firefox的按钮内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！