CSS ::file-selector-button 伪元素

前端梦呓 in Beijing

2022-11-30

input file 文件表单控件，原生的 UI 着实有点难看

文件表单控件原生 UI

怎么美化呢？

# input file 表单控件美化

常用的一种方式：label 模拟，隐藏 input file

<label for="file">请选择</label>
<input type="file" id="file" hidden />

1
2

.file-label {
  background: #089;
  color: #fff;
  padding: 5px 20px;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
}

.file-label::after {
  content: "未选择任何文件";
  position: absolute;
  left: 120%;
  color: #333;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

美化后的如下，是不是好看了太多？！

文件表单控件原生 UI

除此之外还有：

使用任意标签模拟原生 UI，同时隐藏原生 input file，点击任意标签时触发 input file click 事件
input file 设置足够大的尺寸且 opacity: 0 同时覆盖在任意标签，比如 button 标签

但无论如何，上面都是在模拟，并非直接修改原生 input file UI。

终于，::file-selector-button 实现了这样的目的

# ::file-selector-button 伪元素美化

此时仅需要 input file 标签

<input type="file" id="file" />

/* input file 按钮样式 */
::file-selector-button {
  border: none;
  background: #089;
  color: #fff;
  padding: 5px 20px;
  border-radius: 4px;
  font-size: 14px;
}

1
2
3
4
5
6
7
8
9

效果与上面一致

简单，直接

兼容性是前端开发环境密切关注的问题

兼容性点击这里 (opens new window)

基本兼容，除了 IE 的某些版本 ...

另外一点值得注意的，如下方式不能修改 input file 中的文字大小

它只是修改 input file 后面跟着的 未选择任何文件 文字的大小

而 ::file-selector-button 直接控制 input file button 样式

所以，可以控制里面的文字大小

[type="file"]{
  font-size: 20px
}

1
2
3

# 小结

input file 再也不用模拟了

直接 ::file-selector-button 搞定

要控制按钮后面的文字大小

直接修改 input file 标签紧随的文字大小

通过 [type="file"] 修改标签样式即可

扫一扫，微信中打开