改变文本选择框的默认样式

file类型的 <input> 文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。

实时效果如下所示：

 ::file-selector-button伪元素应运而生，专门匹配文件选择输入框样式中的按钮。

 HTML 如下：

<input type="file">

 CSS 代码：

/* 后面的提示文字颜色 */
[type="file"] {
    color: gray;
}
/* 主按钮的样式自定义 */
::file-selector-button {
    height: 3rem;
    font-size: 1rem;
    color: #fff;
    border-radius: .25rem;
    border: 1px solid #2a80eb;
    padding: .75rem 1rem;
    background-color: #2a80eb;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
}

效果如下：

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

#file{font-size: 0;}

效果如下：