Question

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

在这里你可以看到两个效果图：

FF：http://i.stack.imgur.com/wbHhG.png

Chrome：http://i.stack.imgur.com/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/ 你仍然需要在输入字段上保留一些css，尽管FF以相同的方式显示它。

文件上传Chrome中的样式

1 个答案: