Home/ Questions/Q 5997501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:16:22+00:00

I have the following HTML: <input id=outer type=file onchange=console.log(‘No.’);> <input id=inner type=file onchange=console.log(‘Yes!’); />

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0