How to set width of input type "file" through css

Question

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 ?

What is the "security reason" for not wrapping <input type="file"> within an element? — guest271314
– guest271314, Commented Dec 29, 2016 at 9:46
@Mali How is linked Question related to a "security reason" for not wrapping an <input type="file"> within an element? — guest271314
– guest271314, Commented Dec 29, 2016 at 9: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
– Mahi, Commented Dec 29, 2016 at 9: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 <input type="file"> from another element event handler, whether or not the <input type="file"> element is a child element of that element. — guest271314
– guest271314, Commented Dec 29, 2016 at 9:54

priya_singh · Accepted Answer · 2016-12-29 09:46:29Z

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>

answered Dec 29, 2016 at 9:46

priya_singh

2,4881 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

priya_singh Over a year ago

@DreamHunter I posted first. you can see.

ADH - THE TECHIE GUY Over a year ago

sorry, my mistaken

Collectives™ on Stack Overflow

How to set width of input type "file" through css

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related