1

if you click just below demonstration word then also the input type file will click.

how to avoid that , so click event fire only on that area whatever size i have given . 

<!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>

answer won't acceptable if you will wrap this input type file with another element like label , div for security reason. is it possible then ?

Navneeth
  • 988
  • 3
  • 11
  • 29
Mahi
  • 1,707
  • 11
  • 22
  • 1
    What is the "security reason" for not wrapping `` within an element? – guest271314 Dec 29 '16 at 09:46
  • @guest271314 http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input – Mahi Dec 29 '16 at 09:47
  • 1
    @Mali How is linked Question related to a "security reason" for not wrapping an `` within an element? – guest271314 Dec 29 '16 at 09:49
  • because they will make another element and they will try to fire an event from that new element . so for input type file click event doesn't work if you click using javascript not manually . – Mahi Dec 29 '16 at 09:52
  • Still not following "security reason"? Can you link to the specific information that you are referencing at linked Question? If the event is `trusted` that event can be used to dispatch `click` event at `` from another element event handler, whether or not the `` element is a child element of that element. – guest271314 Dec 29 '16 at 09:54
  • @guest271314 by wrapping into another element (x). they will hide original element and will display x . and by click on x they will fire an event on original event . so it is won't acceptable right. – Mahi Dec 29 '16 at 10:01
  • @Mahl _"by wrapping into another element (x). they will hide original element and will display x . and by click on x they will fire an event on original event ."_ The element `` element can be set to `display:none`, though it is not clear how that is related to a "security reason"? The same process described is possible where `` element is not the child element of the clicked element and the event at the element handler is `trusted`. That is, dispatching `click` event to `` element is not exclusive to the parent element. – guest271314 Dec 29 '16 at 10:04
  • @guest271314 my meant was that i won't accept answer if you create wrapper element for click event only. yes you can use any number of ancestor of `input type file` but that shouldn't involved in any click event. – Mahi Dec 29 '16 at 10:14
  • _"my meant was that i won't accept answer if you create wrapper element for click event only. yes you can use any number of ancestor of `input type file` but that shouldn't involved in any click event."_ Your acceptance of an answer is not the topic of the present communication. Rather, am attempting to substantiate and verify in which specific manner `` being wrapped in an element is related to a "security reason"? What is the specific "security reason"? – guest271314 Dec 29 '16 at 10:23

1 Answers1

8

Use overflow: hidden;

<!DOCTYPE html>
<html>
<body>
<style>
input{
border:3px solid red;
width:10px;
overflow: hidden;
}
</style>
<h3>A demonstration of how to access a File Upload Button</h3>

<input type="file" id="myFile">

</body>
</html>
priya_singh
  • 2,478
  • 1
  • 14
  • 32