chrome file input width

Question

so I'm inserting an <input type="file"> object into a fairly small table....everything works fine, but when I view it in Chrome, even though the file upload object itself is only around 170px wide, the thing would take up 240px of space (170px for the upload object and 80px of whitespace) and hence would stretch the table by the excess of that amount....

I tried using size="10" or width="10" to no avail....

anyone know how to set it so that it wouldn't stretch that long? I mean the file upload itself only takes up 170px...I don't see any reason why it should take 240px total in additional whitespace

Answer 1

If you apply a border to the file input using CSS (eg. border: 1px solid red;), you will see that the control contains a whitespace area. This is where the file name of the chosen file will appear.

You can change the width of the control using the CSS styling of width: 170px to make it 170 pixels wide.

Note however that the chosen file name will get truncated by doing this.