按鈕內的文件輸入字段在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（> = 10），FF，Chrome＆中的button標記。邊緣。

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

根據BUTTON標記的W3規范 ，您不能在<button>標記內插入以下標記：

• 一個
• INPUT
• 選擇
• TEXTAREA
• 標簽
• BUTTON
• FIELDSET

但是，允許使用所有其他塊和內聯標記。

Answer 4

在<button>有<input>無效。 考慮將其放在<label> ，或者使用單擊處理程序和合適的CSS或使用錨標記將<span>放入其中。

Answer 5

我不確定你能否這樣做，因為W3C規范說你不能在按鈕內有交互式內容（即可點擊的內容）。

內容模型：短語內容，但必須沒有互動內容后代。

至少在上下文中這個問題也可能是這個問題的重復，這里的答案是認可的。