在Chrome中设置input type='file'元素的高度样式

Question

我有一个HTML表单输入，类型为file：

<input type='file' />

我知道这个元素的样式限制以及解决方法（父级 div、带有点击事件的隐藏字段等），如果您想对其进行自定义样式，这并不是我想要的。

我的问题很简单，如果我将高度应用于该元素，则 IE 和 Firefox 将像所有其他输入类型一样设置元素高度，但 Chrome 忽略了高度属性。

input{
    height:50px;
}

这里有一个jsfiddle。

有没有办法让Chrome遵守高度设置。这似乎是一件简单的事情，但添加!important或内联添加高度并没有任何区别。

注意：有很多关于在SO上样式化文件输入的问题，但没有一个解决了在Chrome中遵守高度属性的问题。在其他浏览器中，这个属性可以正常工作。

我也知道增加字体大小会使输入框变大，但这不是一个吸引人的解决方案。

现在在Chrome中设置高度是否可行？

- atmd

---

我使用的是Chrome浏览器（40.0.2214.111 m），它可以正常工作 - 你使用的是哪个版本？ - maaarghk

@maaarghk，它在DOM中可能更大，但在视觉上不是这样。 - atmd

答案得到了三个赞，问题却被踩了。真的不太理解这是为什么。 - atmd

Answer 1

以下是 Chrome 用伪代码的方式解释它：

PseudoCode css

我已更新我的链接。

  input[type="file"]{
        height:50px;
  }

    input[type="file"]::-webkit-file-upload-button{
        height:50px;
  }

找到更改 - http://jsfiddle.net/xfv0otLL/3/

- Manoz

---

那个伪CSS链接是一个很好的资源。 - atmd