How to remove the free space at the end of ?

Question

Why does display: inline-block not work properly for <input type="file">?

I would like the width of the element to be as wide as the content it's made of (button + text). But there's always some free space at the end of the text.

Why? And can this be fixed?

input[type="file"] {
  display: inline-block;
  min-width: auto;
  width: auto;
  background-color: lightgray;
}

<input type="file">

Screenshot: https://ibb.co/pWWdQ0y

You may want to check this out for a cross browser solution: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button/25825731#25825731 — Techuila, Apr 03 '21 at 17:29

score 0 · Answer 1 · answered Apr 03 '21 at 18:11

0

I do not know whether it is eligible for you, however it is possible to set width through CSS:

input[type='file'] {
  width: 180px;
  background-color: lightgreen;
}

<input type="file">

answered Apr 03 '21 at 18:11

StepUp

36,391
15
88
148

score -1 · Answer 2 · answered Apr 03 '21 at 18:31

-1

Try giving the width in percentage, it will work.

input[type='file'] {
  width: 36%;
  background-color: lightgray;
}

answered Apr 03 '21 at 18:31

Rishabh Mishra

1

How to remove the free space at the end of ?

2 Answers2