如何在Chrome中的文件输入上垂直对齐文件名

Question

我们网站上有一个文件输入,不像演示中那么高(见下文;我夸大了它以更好地显示问题)但我们无法将文件名垂直居中 - 只有按钮垂直居中.这通常不是问题,因为我们通常坚持使用默认样式,但在这种情况下,客户端需要在此输入上使用边框,以便右边框与其下方的一些右对齐按钮对齐.在我们的例子中,高度是23px(行高相同).

请参阅http://jsfiddle.net/UK72P/进行演示.据我所知,这只发生在Chrome和可能的IE9/8中(很快就会确认).jsfiddle中的代码是:

HTML

<input type="file">?

CSS

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

​

是否有一些我不知道的财产或者这是不可能的？

理查德,提前谢谢

Answer 1

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

这对我有用,Chrome 29.0.1547.57

Answer 2

使用 Chrome 黑客

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

但它并没有满足我们的要求。因此，为了这个目的，我制作了这个小提琴。

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