Prevent Html Text To Distort Clickable Overlay

For my website to allow file uploads I created a droparea where people can either drag & drop multiple files to upload or click on the area to upload a single file from disk. F

Solution 1:

one possible solution for this with pure css is pointer-events: none;

.droparea p {
pointer-events: none;
}

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

For better browser support you can use this two polyfill

1. https://github.com/jquery/PEP
2. https://github.com/kmewhort/pointer_events_polyfill