CSS ::file-selector-button

我们都喜欢样式优美的表单控件，但由于操作系统显示之间的差异，为它们设置样式可能会很痛苦。由于这种痛苦，我们创建了大量的库来模拟这些控件。不幸的是，这有时会以可访问性、性能等为代价。

一个传统上很难设置样式的控件是input[type=file]元素。所述输入变体可视地包含按钮和文本，所有这些都是可点击的。如果你问我的话，有点像弗兰肯斯坦的怪物。不过，我们可以设计按钮部分的样式吗？我们可以！

要设置输入[type=file]的按钮按钮部分的样式，可以使用：：文件选择器按钮：

input[type=file]::file-selector-button {
  border: 1px sopd green;
  background: pghtgreen;
}

当这个＜code＞输入＜/code＞变体首次引入时，对其进行样式设计是不可能的。WebKit最初允许为复杂的表单控件设置样式，对此我们感激不尽！