美化 File Input 按钮并去除默认文字

如何美化 File Input 按钮并去除默认文字

默认的 File Input 按钮外观单调且缺乏美感。可以通过以下方法美化 File Input 按钮并去除文字，使其更符合网站整体设计风格，提升用户体验。

方法

隐藏默认 File Input 文字：可以通过设置 input[type='file'] 的 font-size 为 0 来隐藏其默认文字。
创建自定义样式按钮：使用 CSS 为按钮设计自定义样式，例如背景颜色、边框、字体等。
监听自定义按钮点击事件：使用 JavaScript 监听自定义按钮的点击事件，并触发原生的 File Input 的点击事件，从而选择文件。
显示所选文件名称：当用户选择文件后，使用 JavaScript 将所选文件的名称显示在自定义按钮上，以提供更好的用户体验。

示例代码

HTML 代码：

<label for='file-upload' class='custom-file-upload'>
    <i class='fa fa-cloud-upload'></i> 选择文件
</label>
<input id='file-upload' type='file'/>

CSS 代码：

.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
  border-radius: 4px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}

.custom-file-upload:hover,
.custom-file-upload:focus {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

input[type='file'] {
  display: none;
}

JavaScript 代码：

var fileInput = document.getElementById('file-upload');
var customBtn = document.querySelector('.custom-file-upload');
var customTxt = customBtn.innerHTML;

customBtn.addEventListener('click', function() {
  fileInput.click();
});

fileInput.addEventListener('change', function() {
  if (fileInput.value) {
    customBtn.innerHTML = fileInput.files[0].name;
  } else {
    customBtn.innerHTML = customTxt;
  }
});

说明：

以上代码仅供参考，可以根据实际需求进行调整。
fa fa-cloud-upload 是 Font Awesome 图标库中的一个图标，可以根据需要替换其他图标。
您可以根据自己的设计需求，自定义 CSS 样式。
在实际应用中，还需要根据网站整体风格进行美化设计，以确保 File Input 按钮与网站整体风格一致。