Nested file input doesn't work in Firefox

Question

I have the following HTML:

<input id="outer" type="file" onchange="console.log('No.');">
    <input id="inner" type="file" onchange="console.log('Yes!');" />
</input>

Styled like such:

#inner { cursor: pointer; position:absolute; opacity: 0; }
#outer { position: relative; overflow: hidden; direction: ltr; }

It looks like just a standard file input element, as the #inner input element is hidden and wrapped by the #outer one. My desired behavior is to see "Yes!" when I select a file, which I get with Webkit browsers (both inputs activate) but not Firefox. Do you have any ideas about how I can get this in Firefox as well?

Shouldnt you set the Z-Index property of the inner one, to a higher value than the outer one? — Anirudh Ramanathan
– Anirudh Ramanathan, Commented Jun 10, 2011 at 16:06
Thanks, but I tried that and it didn't make a difference. Z-indexes might not affect elements relative to their parents. — Eric Yang
– Eric Yang, Commented Jun 10, 2011 at 16:11

Guffa · Accepted Answer · 2011-06-10 16:14:35Z

1

The reason for the difference in behaviour is most likely that the code is invalid.

See HTML 4: 17.4 The INPUT element: "Start tag: required, End tag: forbidden"

So, you can't nest an input tag inside another. Different browsers handle invalid markup differently, so they can for example ignore that one is inside the other and place them beside each other, or ignore the inner tag completely.

If you are curious, you can use FireBug to examine the DOM to find out what elements are created from the markup, but it's really moot as invalid markup won't work reliably anyway.

answered Jun 10, 2011 at 16:14

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Yang Over a year ago

Thanks. It looks like Firefox completely ignores the inner tag, and it's grayed out in Firebug. I guess I'll have to change the structure around.

Collectives™ on Stack Overflow

Nested file input doesn't work in Firefox

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related