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屋!