::file-selector-button

CSS 中的 ::file-selector-button 是一个伪元素，它选择 HTML 中的 <input type="file">。

input::file-selector-button {
  background-color: #f8a100;
}

您无疑遇到过文件上传输入 - 它们非常常见，尤其是用于在表单中包含文件附件，例如 PDF 或图像。

语法

selector::file-selector-button { }

您实际上不必在伪元素前面指定元素

/* This works */
input[type="file"]::file-selector-button{ }

/* But this is more concise */
::file-selector-button{ }

当然，这将全局地为所有文件选择器按钮设置样式。 如果您试图定位文件选择器按钮的一个实例，那么您将需要包含一个与其匹配的选择器。

兼容 CSS 属性

::file-selector-button 与任何有效的 CSS 属性一起使用。

规范

::file-selector-button 在 CSS 伪元素模块级别 4 规范中定义。 （这是 原始问题单）。

按钮是影子 DOM 的一部分

文件输入按钮位于影子 DOM 中。 就像 <iframe> 一样，影子 DOM *节点* 内部的选择器和样式不会泄漏到影子 *根* 外部。 同样，影子根外部的样式也不会泄漏到内部。

这也适用于文件输入按钮。 ::file-selector-button 为我们提供了有限的访问权限来为按钮设置样式。 它受到限制，因为没有办法为按钮旁边的占位符“未选择文件”文本设置样式。 请注意，文本也是不可选择的。

关于影子 DOM 这里需要注意的另一件事是，在 Web 组件中为文件输入按钮设置样式 - 将元素嵌入影子 DOM 节点 - 会失败，因为封装的样式无法泄漏到组件外部并进入另一个影子 DOM 节点，如 伊藤隼人所解释的。

动画不可行

虽然官方文档说

对 ::file-selector-button 伪元素适用的属性没有限制。

…我发现伪元素无法进行动画。 也许这与 animation 属性关系不大，而更多地与 @keyframes 不兼容有关？ 无论哪种方式，我都 提交了一个问题单，您可以跟踪，以防这方面有进展。

演示

我偶然发现了 CodePen 演示，其中包含 为使用盒阴影填充按钮背景色的按钮创建简洁的悬停效果，并想将其应用于文件输入，以演示使用 ::file-selector-button 的可能性

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
10-11	89	82	89	14.1	75

iOS Safari	Android Chrome	Android Firefox	Android 浏览器	Opera Mobile
14.5	104	101	104	64

早期的 Safari、Chrome 和 Opera 版本使用伪选择器的带前缀版本，::-webkit-file-upload-button。 同样，旧版本的 Edge 和 Internet Explorer 依赖于 ::-ms-browse。 因此，如果您正在寻找一种确保最大浏览器支持的可靠方法，那么这是您的配方

/* Fallback for Safari, Chrome, and Opera */
input[type="file"]::-webkit-file-upload-button {
  background-color: #f8a100;
}
/* Fallback for Legacy Edge and IE */
input[type="file"]::-ms-browse {
  background-color: #f8a100;
}
/* Standard */
input[type="file"]::file-selector-button {
  background-color: #f8a100;
}