File input field inside button doesn't work in Firefox

Question

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 set

Answer 1

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

Answer 2

I am not sure that you can do this as the W3C spec says you can not have interactive content (i.e. clickable content) inside a button.

Content model: Phrasing content, but there must be no interactive content descendant.

This question at least in context is also a possible duplicate of this of which the answer here is accredited.

Answer 3

try it

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>

I put the input inside a div and made a div look like a button with css

They worked in my tests on IE, FF and Chrome

I hope it helps

Answer 4

According to W3 specification of the BUTTON tag, you cannot inset the following tags inside a <button> tag:

• A
• INPUT
• SELECT
• TEXTAREA
• LABEL
• BUTTON
• FIELDSET

However, all the other block and inline tags are allowed.

Answer 5

It is not valid to have an <input> inside a <button>. Consider putting it inside a <label> instead, or a <span> with a click handler and suitable CSS or use anchor tags.