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

Posted 2023-03-05

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

【英文标题】：How to vertically align filename on file input in Chrome

【发布时间】：2012-11-17 21:41:20

【问题描述】：

我们网站上有一个文件输入，它没有演示中的那么高（见下文；我夸大了它以更好地显示问题）但我们无法让文件名垂直居中 - 只有按钮垂直居中。这通常不是问题，因为我们通常坚持使用默认样式，但在这种情况下，客户端希望在此输入上设置边框，以便右边框与其下方的一些右对齐按钮对齐。在我们的例子中，高度是 23px（与 line-height 相同）。

请参考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;

​

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

提前致谢， 理查德

【问题讨论】：

你不能对输入类型文件做任何事情，看看这个链接--link

【参考方案1】：

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

这对我有用，Chrome 29.0.1547.57

【讨论】：

太棒了！但更好的是：line-height: 1ex;，因此即使文本大小发生变化，它也能正常工作。

【参考方案2】：

另一个解决方案的工作原理仅仅是因为 line-height 足够小，所以使用 line-height 为 0 会更有意义。

这仍然有一个非零高度，它只是删除了“填充”——对我来说，文件输入的边距和填充默认为0。

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

【参考方案3】：

您可以使用输入文件按钮垂直对齐输入文件字段：

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

【参考方案4】：

使用 Chrome Hack

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

但它并没有满足我们的要求。所以为了这个目的，我做了这个小提琴。

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

【参考方案5】：

这个问题似乎是 Chrome 中的一个错误，因为它将按钮移动到 line-height 的底部，但不会移动任何生成的文本。解决方案是使用边距设置高度，如果需要边框，则使用封闭的 div。

html

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

CSS

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


input 
  margin: 10px 0;

在this fiddle中实现