按钮内的文件输入字段在 Firefox 中不起作用

Question

我想在我的页面上有一个样式文件 input 字段，因此将其放在 button 中，它完全覆盖并通过将其 opactiy 设置为 0 使其不可见。

这种方法在最新版本的 Chrome 中运行良好，但 Firefox（和 IE）在单击按钮时不会打开文件对话框：

http://jsfiddle.net/ch8xxvez/3/

<button style="width: 100px; height: 100px; position: relative;">Upload button
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input>
</button>

如果我用div 替换button 元素，则相同的代码可以工作，但我真的很想知道是否有办法在最新版本的IE 中使用button 标记（ >= 10)、FF、Chrome 和 Edge。

Answer 1

HTML 中的按钮元素内不允许输入元素。

编写有效的 HTML，而不是依赖于一致的错误恢复。

制作按钮并输入同级元素，然后将它们放置在容器（例如 div）中。

Answer 2

试试看

https://jsfiddle.net/DeivissonSedrez/0z6mq5yk/1/

<div class="fakeButton">Upload button
        <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input>
</div>
    <style>
        .fakeButton{
            width: 100px; 
            height: 100px; 
            position: relative; 
            border:1px solid #000; 
            border-radius:3px; 
            text-align:center; 
            font: 15px arial; 
            line-height:90px;
            box-shadow: inset 0 2px 3px 0 rgba(255,255,255,.3), inset 0 -3px 6px 0 rgba(0,0,0,.2), 0 3px 2px 0 rgba(0,0,0,.2);
            background-image: -webkit-linear-gradient(#EEEEEE, #D8D8D8 130%);
            background-image: -moz-linear-gradient(#EEEEEE, #D8D8D8 130%);
            background-image: -o-linear-gradient(#EEEEEE, #D8D8D8 130%);
            background-image: linear-gradient(#EEEEEE, #D8D8D8 130%);
        }
    </style>

我将输入放在一个 div 中，并使一个 div 看起来像一个带有 css 的按钮

他们在我对 IE、FF 和 Chrome 的测试中工作

希望对你有帮助

Answer 3

根据W3 specification of the BUTTON tag，您不能在<button> 标签内插入以下标签：

• 一个
• 输入
• 选择
• 文本区域
• 标签
• 按钮
• 字段集

但是，所有其他块和内联标记都是允许的。

Answer 4

在<button> 中包含<input> 无效。考虑将其放在 <label> 中，或使用点击处理程序和合适的 CSS 或使用锚标记的 <span>。

Answer 5

我不确定您是否可以这样做，因为 W3C 规范说您不能在按钮内包含交互式内容（即可点击内容）。

内容模型： 短语内容，但不得有交互式内容后代。

这个问题至少在上下文中也是一个possible duplicate of this，这里的答案得到了认可。