css - 用CSS装饰浏览按钮

Question

我添加了一个“浏览”按钮用于使用此命令上传文件

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

还有这个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;
}

当我用 firefox 运行它时，我看到“未选择文件”和“浏览...”作为按钮文本。请看图

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

Answer 1

我建议使用引用输入标签的 label 标签作为显示按钮，并为输入标签使用 display:none。 input 标签确实不太支持 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>