CSS ::file-selector-button的用法

长久以来，file 类型的 <input> 文件选择框有个遭诟病的问题，那就是浏览器默认的样式不美观，且无法自定义。传统的做法是隐藏文件选择输入框，然后使用 <label> 元素模拟上传按钮，HTML 结构示意如下：

<input type="file" id="file" hidden>
<label for="file" class="cs-button">上传文件</label>

此时，点击 <label> 元素就会自动触发文件选择输入框的点击选择行为，从而引出系统的文件选择框进行文件选择。

然而这个方法有些啰唆，代码并不是很简洁，在几乎所有表单元素都能自定义的年代，文件选择输入框依然不能自定义样式就显得有些格格不入。于是就有了 ::file-selector-button 伪元素，专门匹配文件选择输入框样式中的按钮，如下图所示。


下面这个例子中，我们对文件选择输入框的按钮进行了样式自定义：

[type="file"] {
    color: gray;
}
::file-selector-button {
    height: 3rem;
    line-height: var(--ui-button-line-height);
    font-size: 1rem;
    color: #fff;
    border-radius: .25rem;
    border: 1px solid #2a80eb;
    padding: .75rem 1rem;
    background-color: #2a80eb;
    box-sizing: border-box;
}

此时，文件选择输入框的按钮就会变成下图所示的常见的主题色按钮：


另外，如果大家希望隐藏按钮后面的文字“未选择任何文件”，可以对当前 <input> 元素设置font-size:0。