怎么用CSS改变HTML文件输入框的“未选择文件”文本颜色

在网页里用到文件上传时，原生的 <input type="file"> 控件总会在右侧带一段“未选择文件”的说明文字。这段字体的颜色由浏览器内核决定，通常是灰色的，和很多精心设计的界面格格不入。开发者常以为写个 color 就能改，结果按钮上的字变了，旁边的提示纹丝不动。根本原因在于，这段文本并不是普通的 DOM 文本节点，而是浏览器在 file 控件内部通过阴影 DOM 生成的，外面拿不到，也选不中。

为什么直接改 color 没用

当我们写下下面这段样式时，大多数人期待整个控件的文字都变红：

input[type="file"] {
  color: red;
}

但实际效果是，只有那个“选择文件”按钮里的文字变成了红色，后面的“未选择文件”依旧是系统灰。这是因为 file 控件在渲染时分为两部分：一部分是 ::file-selector-button 这个可样式化的按钮，另一部分是浏览器自己塞进去的标签文本，它不在标准选择器范围内，color 属性不会向下传递进去。

从规范角度看，不同浏览器对这段占位文本的渲染实现完全不同。Chrome 和 Edge 用了内部阴影树，Firefox 早年还能靠一些非标准伪类碰触，现在也收紧了。所以想用纯 CSS 一行搞定，基本上不可能，必须换思路。

方案：彻底重置外观再自建结构

最稳妥也最通用的做法，是把原生控件的样子全部清掉，然后用 label 包一层自定义 UI。这样“未选择文件”文本根本不出现，颜色自然全由你定。

<label class="upload-box">
  <span class="upload-text">点击上传文件</span>
  <input type="file" class="real-file" />
</label>

对应的 CSS 把真实 input 藏起来，只留自定义文字：

.real-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.upload-box {
  display: inline-block;
  padding: 10px 20px;
  background: #2d8cf0;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.upload-text {
  font-size: 14px;
}

这种写法的好处是兼容性极好，从 IE11 到现代浏览器都没问题。缺点是要自己写 JS 去更新 span 里的文件名，因为原生提示没了。不过对颜色控制来说是百分百自由的，不用担心浏览器升级又改了阴影结构。

如果用户选了文件，可以用一点脚本把文件名填回去：

document.querySelector('.real-file').addEventListener('change', function(e) {
  var name = e.target.files[0] ? e.target.files[0].name : '点击上传文件';
  document.querySelector('.upload-text').textContent = name;
});

轻量方案：只改按钮并利用 color 继承

如果懒得拆结构，也可以接受原生文本存在，但让它的颜色跟着按钮走。思路是先把按钮做成透明背景，再给 input 设颜色，部分浏览器会让后面文本继承这个 color。

input[type="file"] {
  color: #333;
}
input[type="file"]::file-selector-button {
  background: transparent;
  border: none;
  color: #333;
}

在 Chrome 里测试会发现，“未选择文件”确实变成了 #333，虽然不是纯靠改它，而是整体 input 的 color 被它读取了。Firefox 下同样生效。但这个办法不算规范保证，哪天浏览器改了内部继承逻辑就可能失效，只适合对样式要求不苛刻的后台系统。

要注意的是，::file-selector-button 在旧版 Chrome 叫 ::-webkit-file-upload-button，写兼容最好两个都写，避免老用户看到默认灰按钮。

对比与选型建议

把两种思路放一起看：

如果你的项目是面向外部用户的品牌站，建议用第一种，颜色和交互都能对齐设计稿；如果是内部工具，第二种能省不少事。无论哪种，都别再试图用类似 input[type=file] span 这种选择器去抓那段文本了，它不在你的 DOM 里。

最后提醒，任何涉及文件控件的样式修改，都先在目标浏览器实机点一下，别只看渲染截图。文件对话框和控件状态机在不同系统上差异比想象中大。

CSSHTML_file_inputfile_upload修改时间：2026-08-03 06:36:25