Question

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

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

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

如果我将button元素替换为div，则相同的代码有效但我真的想知道是否有办法使用button标记来处理此问题最新版本的IE（＆gt; = 10），FF，Chrome＆amp;边缘。

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>代码中插入以下代码：

A
INPUT
选择
TEXTAREA
LABEL
BUTTON
FIELDSET

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

Answer 4

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

Answer 5

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

内容模型：短语内容，但必须没有互动内容后代。

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

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

5 个答案: