Firefox中的按钮内的文件输入字段不起作用 [英] File input field inside button doesn't work in Firefox

问题描述

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

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

http： //jsfiddle.net/ch8xxvez/3/

 < button style =width：100px; height： 100px; position：relative;>上传按钮
< input type =filestyle =position：absolute; top：0; left：0; width：100％; height：100％; opacity： 0;>< /输入> 
< / button> 
  

如果我替换按钮元素与一个 div 但我真的想知道是否有一种方法使这个工作与按钮标记在最新版本的IE（> = 10），FF，Chrome&边缘。

解决方案

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

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

I'd like to have a styled file input field on my page and therefore put it inside a button which it completely covers and made it invisible by setting its opactiy to 0.

This approach works pretty well in the latest version of Chrome but Firefox (and IE) won't open the file dialog when clicking the button:

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>

The same code works if I replace the button element with a div but I'd really like to know if there is a way to make this work with the button tag in the latest versions of IE (>= 10), FF, Chrome & Edge.

解决方案

Input elements are not allowed inside button elements in HTML.

Write valid HTML instead of depending on consistent error recovery.

Make the button and input sibling elements and then position them within a container (such as a div).

这篇关于Firefox中的按钮内的文件输入字段不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！