Chrome input type file width (click area)

Question

#uploadImg{width:30px;}

<input type='file' id="uploadImg" />

I have an input type file, i change width to 30px, when i test on chrome, if i click right hand side (outside of 30px) the input file will still open. anyone know how to change the click area for input type file in chrome?

http://jsfiddle.net/smrB4/1/

SaschaP · Accepted Answer · 2014-01-29 16:39:30Z

3

just add some css:

#uploadImg{width:30px; overflow:hidden;}

answered Jan 29, 2014 at 16:39

SaschaP

8891 gold badge7 silver badges25 bronze badges

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

Comments

aksu · Accepted Answer · 2014-01-29 16:47:33Z

1

You need to add overflow:hidden attribute.

Also, it might be a good idea to style the file upload dialog itself because it will look different on every browser. Basically you need 'hide' the real file upload element and add custom styled element.

See an example here:

http://jsfiddle.net/smrB4/3/

HTML:

<div id='container'>
    <div id='overlay'>
        X
    </div>
    <input type='file' id="uploadImg" />
</div>
<br>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8593;click here </span>

CSS:

#uploadImg{width:30px;opacity:0.0;}
#container{position:relative;overflow:hidden;width:30px;height:30px;}
#overlay{position:absolute;top:0p;width:28px;height:28px;background-color:#ddd;border:1px solid #000}

edited Jan 29, 2014 at 16:47

aksu

5,2365 gold badges26 silver badges39 bronze badges

answered Jan 29, 2014 at 16:45

Kaspars Ozols

7,0371 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

Chrome input type file width (click area)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related