Html 现代浏览器中的样式输入类型“文件”

我想问一下如何在2019年设置输入字段type='file'的样式？我看到了很多问题和答案，但几乎所有的问题和答案都需要jQuery，我们知道jQuery不像10年前那么流行。我想添加一些图标作为按钮，我知道有很多库可以为您提供完整的输入字段，但这不是我想做的，但我想学习如何自定义和设置我自己的输入字段type='file'的样式

---

如何通过显示2019年更新的文件来实现这种输入字段？

正如我在评论部分所说的，您需要一个标签标签以及一些CSS来实现这一点。事实上，您需要JavaScript为UI注入活力

所以，我在这里为大家做一个演示：

const inputFile=document.querySelector'.my file'， label=document.querySelector'.custom input'， icon=label.querySelector'.label icon'， text=label.querySelector'.label text'； inputFile.addEventListener'change'，=>{ text.textContent='请选择一个文件'； 如果inputFile.files.length==1{ text.textContent=inputFile.files[0].name.toUpperCase； text.classList.add'attached'； icon.classList.add'attached'； }否则{ text.classList.remove'attached'； icon.classList.remove'attached'； } }; .集装箱{ 填充：12px 6px； 背景色：f6f6f6； } .包装纸{ 显示器：flex； 调整内容：灵活启动； 对齐项目：拉伸； 边框：1px实心底纹； 边界半径：6px； 溢出：隐藏； } .wrapper.my文件{ 显示：无； } .wrapper.custom输入{ 背景色：fff； 弹性：1； 光标：指针； } .wrapper.custom input.label图标{ 显示：内联块； 填充：15px； 背景色：fde4af； 颜色：181818； 过渡期：一切顺利； } .wrapper.custom input.label-icon.attached{ 背景色：e6ac2d； 颜色：fff； } .wrapper.custom input.label-icon.attached>.fa{ 文本阴影：0 0 15px rgba24,24,24,35； } .wrapper.custom input.label文本{ 显示：内联块； 填充：4px； 过渡期：一切顺利； } .wrapper.custom input.label-text.attached{ 字号：600； } 请选择一个文件。 事实上，输入[type=file]是不可自定义的。你需要一个标签来做这件事。