css - 无法打开带有标签内按钮的文件对话框

Question

为了隐藏(但保留功能)丑陋的文件对话框默认输入类型文件按钮，我使用了以下机制:

HTML:

    <label for="file-input">
        <i class="fa fa-edit"></i> <!-- acts as file input on click-->
    </label>
    <input type="file" id="file-input" />

CSS:

#file-input {
    display: none; //hide the file input
}

这按预期工作:我单击 font awesome 编辑图标，然后弹出文件对话框。

但是，当我使用按钮时它停止工作。单击按钮时没有出现文件对话框:

    <label for="file-input">
        <button type="button">Upload file</button> <!-- not working-->
    </label>
    <input type="file" id="file-input" />

Answer 1

Label 表示用户界面中元素的“标题”。您的按钮不起作用的原因是因为按钮不被视为“控制”元素的有效“标题”，因为它是“控制”元素。(参见:https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)

如果您在标签内使用图片或一段文字，它会起作用，因为这将被视为标题(这就是您第一次尝试成功的原因)。如果您想创建一个自定义按钮，您可以使用一些文本或图像标签，否则您将需要一些 javascript。

编辑:也许这个页面可以提供帮助:http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/他们使用的 javascript 向用户显示他选择的文件