如何将表单文件输入框的“No File Chosen”移至“Choose File”按钮下方？

当然可以实现，核心思路是隐藏原生的文件输入控件，用自定义的HTML元素模拟按钮和文本显示区域，再通过JS同步选中的文件名。以下是具体实现方案：

核心代码示例 #

HTML结构 #

<div class="custom-file-upload">
  <button class="upload-btn">选择文件</button>
  <span class="file-text">未选择任何文件</span>
  <input type="file" id="fileInput" class="hidden-file-input">
</div>

CSS样式 #

/* 隐藏原生文件输入框 */
.hidden-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义上传容器 */
.custom-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 自定义按钮样式 */
.upload-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.upload-btn:hover {
  background-color: #0056b3;
}

/* 文本显示样式 */
.file-text {
  color: #666;
  font-size: 14px;
}

JavaScript逻辑 #

const fileInput = document.getElementById('fileInput');
const fileText = document.querySelector('.file-text');

fileInput.addEventListener('change', function() {
  if (this.files.length > 0) {
    fileText.textContent = this.files[0].name;
  } else {
    fileText.textContent = '未选择任何文件';
  }
});

说明 #

1. 原生的<input type="file">被设置为透明且尺寸为0，实际点击自定义按钮时，通过事件冒泡触发原生控件的文件选择框。
2. 利用flex-direction: column实现按钮在上、文本在下的布局，完全符合需求。
3. 用户选择文件后，JS会自动把选中的文件名同步到下方的文本区域，功能和原生控件一致。

这种方式可控性极强，你还能根据需求自由调整按钮和文本的样式、间距，比直接修改原生控件的局限性小很多。

内容的提问来源于stack exchange，提问作者user2596635