自定义文件输入样式

如果您对Webkit / Blink / Chrome特定的样式感兴趣，可以隐藏一个专有的伪元素，然后使用非标准的psudeo-on-an-input输入：

<input type="file" class="custom-file-input">

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

演示版

在 CodePen上查看 Chris Coyier （ @chriscoyier ） 在WebKit / Blink中的笔自定义文件输入

合理的警告：它不会显示所选的文件名，但是您可以对其进行调整。 我发现这些天通常会在选择文件后触发事件，并以这种方式捕获数据。

WTF表格

总是值得一试的是WTF的形式也是这样做的：

参见Chris Coyier （ @chriscoyier ）在CodePen上从WTF表单输入的笔文件 。

翻译自: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/