Clicking just below the word demonstration also triggers a click on the input type file. How can this be avoided so that the click event only fires in the intended area regardless of size?
<!DOCTYPE html>
<html>
<body>
<style>
input{
border:3px solid red;
width:10px;
}
</style>
<h3>A demonstration of how to access a File Upload Button</h3>
<input type="file" id="myFile">
</body>
</html>Is it possible to prevent wrapping the input type file with another element like label or div for security reasons? The answer will not be accepted if this is done.