How to vertically align filename on file input in Chrome

Question

We have a file input on our site which isn't quite as high as in the demo (see below; I've exaggerated it to show the issue better) but we cannot get the filename to centre vertically - only the button centres vertically. This would not normally be an issue as we usually stick with the default style, but in this case the client wants a border on this input so that the right border lines up with some right-aligned buttons below it. The height, in our case, is 23px (same for line-height).

Please refer to http://jsfiddle.net/UK72P/ for a demo. To my knowledge this only happens in Chrome & possibly IE9 / 8 (will confirm shortly). The code in the jsfiddle is:

HTML

<input type="file">

CSS

input {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border: 1px solid #999;
}

Is there some property I don't know about or is this just not possible?

Thanks in advance, Richard

You can't do anything with input type file, check out this link-- [link](http://stackoverflow.com/questions/2825509/can-we-change-input-type-file-style) — Praveen Dabral, Mar 29 '13 at 20:49

Max · Answer 1 · 2013-08-29T00:57:12.210

13

input[type="file"] {
  line-height: 10px;
}

This worked for me, Chrome 29.0.1547.57

edited Aug 29 '13 at 00:57

answered Aug 28 '13 at 21:06

Max

354
4
11

4

Awesome! But even better: `line-height: 1ex;`, so it works even when the text size gets changed. – Michael Scheper Oct 25 '14 at 01:06

Ryan Taylor · Answer 2 · 2017-03-14T23:53:05.750

3

The other solution works simply because the line-height is sufficiently small, so it'd make more sense to use a line-height of 0.

This will still have a non-zero height, it just removes "padding" -- for me margin and padding on file input was 0 by default.

input[type="file"] {
  line-height: 0;
}

edited Mar 14 '17 at 23:53

answered Dec 21 '16 at 22:03

Ryan Taylor

12,559
2
39
34

score 2 · Answer 3 · answered Sep 12 '16 at 15:02

2

You can align vertically input file field using input file button:

input[type="file"]::-webkit-file-upload-button {
  vertical-align: middle;
  height: 100%;
}

answered Sep 12 '16 at 15:02

user3051730

71
3

score 1 · Answer 4 · answered Mar 29 '13 at 21:07

1

Use Chrome Hack

input{-bracket-:hack[;line-height:50px;];}

But it didn't fullfill our requirement. So for this purpose i make this fiddle.

http://jsfiddle.net/hassaan39/hTezL/3/

answered Mar 29 '13 at 21:07

Hassaan

328
1
2
9

score 1 · Answer 5 · answered May 09 '13 at 16:19

The problem seems like a bug in Chrome as it moves the button to the bottom of the line-height but won't move the generated text for anything. The solution is to set your height using margin and use an enclosing div if you want a border.

HTML

<div class="file-border">
  <input type=file>
</div>

CSS

.file-border {
  border: 1px solid #999;
}

input {
  margin: 10px 0;
}

Implemented in this fiddle

How to vertically align filename on file input in Chrome

5 Answers5

HTML

CSS