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

Solution 1

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

This worked for me, Chrome 29.0.1547.57

Solution 2

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;
}

Solution 3

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

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

Solution 4

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/

Solution 5

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

View more solutions