用css装饰浏览按钮

我用这个命令添加了一个文件上传的“浏览”按钮

<input type="file" name="ForUpload[]" id="ForUpload" class="brw" onchange="addIitem()" on>

当我使用firefox运行它时，我看到“未选择任何文件”和“浏览…”作为按钮文本。请看这个数字

---

我想放置一个按钮并编写一个自定义文本作为占位符，例如，请选择音乐文件。我该怎么做呢？

事实上，此按钮样式是固定的，不可更改的，但您可以将样式设置为另一个框、元素或按钮，将主文件按钮设置为不可见，并将样式化的框、元素或按钮单击事件设置为触发主文件按钮单击。

我认为此代码对您有帮助

“严格使用”；
;（功能（文档、窗口、索引）
{
var inputs=document.querySelectorAll（'.inputfile'）；
Array.prototype.forEach.call（输入，函数（输入）
{
var label=input.nextElementSibling，
labelVal=label.innerHTML；
input.addEventListener（'change'，函数（e）
{
var fileName=''；
如果（this.files&&this.files.length>1）
fileName=（this.getAttribute（'data multiple caption'）| |'）.replace（'{count}'，this.files.length）；
其他的
fileName=e.target.value.split（'\\'）.pop（）；
如果（文件名）
label.querySelector（'span'）.innerHTML=fileName；
其他的
label.innerHTML=labelVal；
});
//Firefox错误修复
addEventListener（'focus'，function（）{input.classList.add（'has focus'）；}）；
addEventListener（'blur'，function（）{input.classList.remove（'has focus'）；}）；
});
}（文档，窗口，0））
.brw{
高度：0.1px；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
宽度：0.1px；
z指数：-1；
}
.brw+标签{
背景色：#1DB6E0；
颜色：#fff；
光标：指针；
填充：10px；
文本溢出：省略号；
空白：nowrap；
} 
.brw+标签svg{
填充：当前颜色；
高度：1.5em；
右边距：0.25em；
边缘顶部：-0.25em；
垂直对齐：中间对齐；
宽度：1.5em；
}

请选择音乐文件&hellip；

。文件输入{
显示：块；
边框：1px实心#f00；
光标：指针；
}
.file输入.label{
边框：1px实心#00f；
}
.file输入.input{
显示：block/*允许形状-因为默认情况下它是“内联的”*/；
不透明度：0；
宽度：0；
身高：0；
溢出：隐藏/*可能是更好的方法*/；
}

把你的我建议使用一个参考输入标签的标签标签作为显示按钮，并为输入标签显示：无。输入标记确实不是很容易使用CSS

.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

<input type="file" name="ForUpload[]" id="ForUpload" style="display:none" onchange="addIitem()" on>
<label for="ForUpload" class="brw">For Upload</label>

.brw{
字体大小：20px；
颜色：白色；
显示：内联块；
背景#1CB6E0；
边界：无；
填充：7px 15px；
字号：700；
边界半径：3px；
空白：nowrap；
光标：指针；
}
上传
输入端的“开”是什么？为什么会有php标签？PS:.brw可能是一个非常糟糕的类名。外人不可能知道那是什么。这不值得节省空间——你应该全力以赴，给它起个描述性的名字——因为你很可能只写两次——但准备了一百次。@sheriffderek:关于重复，我看到了这个主题，但有很多不同的回答。另外，我的css代码与其中一个答案类似！这对我不起作用。你没有读到答案。你可能想在非显示中直观地隐藏输入：none way-alla A11Y。
.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

<input type="file" name="ForUpload[]" id="ForUpload" style="display:none" onchange="addIitem()" on>
<label for="ForUpload" class="brw">For Upload</label>