首页 > 编程笔记

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 伪元素,专门匹配文件选择输入框样式中的按钮,如下图所示。


图 1 文件选择输入框默认的按钮效果

下面这个例子中,我们对文件选择输入框的按钮进行了样式自定义:
[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;
}
此时,文件选择输入框的按钮就会变成下图所示的常见的主题色按钮:


图 2 文件选择输入框的按钮自定义后的效果

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

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。