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

Answer 1

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

This worked for me, Chrome 29.0.1547.57