html - Chrome 中的文件上传样式

Question

我在网站的一部分中有一个 html 公式，只有特定的管理用户才能访问。在此表单中，您可以上传 csv 文件。由于只有一小部分用户可以做到这一点，因此功能比样式更重要。所以我决定不使用通常的技巧在字段上覆盖 div。我只想归档一件事:该字段中的文本在 Chrome 中应与 FF 中的外观相同(垂直和水平居中文本)。

在这里您可以看到两种效果图:

FF:/image/wbHhG.png

Chrome:/image/1BFHu.png

HTML 代码:

<input type="file" class="button blue full-width" name="csv_file" id="csv_file">

CSS 样式:

color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;

Answer 1

您可以通过添加以下 css 来解决其中一个问题:

input[type=file]::-webkit-file-upload-button {
    margin: 1px 0;
    height: 48px;
}

这使得按钮像 FF 一样占据更多的高度，并且还使文本垂直居中。 不太确定如何水平居中，也许其他人可能知道一个技巧。

一个jsfiddle来显示它的工作:http://jsfiddle.net/bcwk8qvt/

[编辑] 您可以通过将大部分原始 CSS 添加到包裹在输入字段周围的 div 来使其水平居中，如下所示: http://jsfiddle.net/bcwk8qvt/3/ 尽管 FF 以相同的方式显示它，但您仍然需要在输入字段上保留一些 css。