0

I'm trying to create Drag and Drop file functionality, i took reference code from below links, but the problem is I can't see my Drop element in Firefox and IE.

Firefox Version i have: 57.0.2

Reference  Code Used:

https://codepen.io/aaronvanston/pen/dpRkXO

Amit Golhar
  • 799
  • 4
  • 8
  • 21
  • Your drop elements meaning the 'Add Image' buttons and 'Drag and drop a file' boxes? – Bodrov Feb 01 '19 at 13:55
  • Yes, either user can select file on click of button or can drag directly . – Amit Golhar Feb 01 '19 at 13:56
  • if you can open the above URL in Chrome you will see the drop-box element but if you open in Firefox or IE it's not showing drop element. i don't understand exact problem. – Amit Golhar Feb 01 '19 at 13:59

2 Answers2

3

The Living Standard (a.k.a. current version of official web standards) states that the <input> tag can have the following content: Nothing.

This type of tags are also known as "empty tags", "empty elements" or "void tags". A full list can be found here. They cannot have any content, including pseudo-elements.

I have no idea why and when Chrome started allowing content on <input> but, according to the Living Standard, it should not. The normal, thus expected, behavior is the one of the other two browsers.

If you want your code to work in all browsers, the prerequisite is to have valid markup.

I should also add that, in principle, even if a browser is currently more permissive than others with a particular type of invalidity, a decent developer should not expect it to last. Unless the Standard changes, you should expect Chrome to not allow content on <input>s soon.

tao
  • 82,996
  • 16
  • 114
  • 150
1

It's about your drop element's file inputs; what the code does is to hide the real input and make a nice view using input's :before sudo-element.

firefox doesn't render ::before on inputs firefox doesn't render ::before on inputs

chrome renders ::before on inputs chrome renders ::before on inputs

chrome has no problems rendering inputs as containers so :before & :after for inputs can work on chrome. but IE & firefox doesn't recognize inputs as containers. so the styles doesn't apply. see This Post for more info.

Mojtaba Hn
  • 457
  • 2
  • 10