如何用CSS设置input type="file"按钮旁文本样式并实现全宽布局？

原生的input[type=file]文本区域（显示文件名的部分）没有直接可用的CSS伪元素来选中修改，你之前写的input[type=file] *{display:block}无效——因为input属于替换元素，内部不存在可选择的子元素。要实现你要的样式，最靠谱的方案是容器包裹+视觉隐藏原生input+自定义元素模拟交互区域，同时保留原生文件选择功能。

实现步骤与代码示例 #

HTML结构

用容器包裹原生input、自定义按钮和文本显示区：

<div class="file-upload-container">
  <input type="file" id="file-upload" class="file-upload-input">
  <label for="file-upload" class="file-upload-btn">选择文件</label>
  <span class="file-upload-text">未选择任何文件</span>
</div>

CSS样式

/* 复用你现有全局变量 */
:root {
  --color-secondary: #e9ecef;
}

/* 视觉隐藏原生input，但保留可访问性 */
.file-upload-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 容器设置全宽，强制按钮与文本换行 */
.file-upload-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 自定义按钮样式，和你现有.btn-secondary保持一致 */
.file-upload-btn {
  background-color: var(--color-secondary);
  color: #333;
  transition: all .2s ease-in-out;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.file-upload-btn:hover {
  background-color: #dcdcdc;
}

.file-upload-btn:active {
  background-color: #c1c1c1;
}

/* 自定义文本样式，满足你的需求 */
.file-upload-text {
  color: #666; /* 修改文本颜色 */
  font-size: 14px;
  white-space: pre-wrap; /* 强制文件名过长时换行 */
}

可选：实时同步选中文件名

加一段简单JS，让文本区实时显示选中的文件名：

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

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

为什么不用原生修改？ #

原生input[type=file]的文本区属于浏览器原生UI，不同浏览器实现差异极大，没有统一的CSS选择器能直接选中它。用自定义容器的方法既能完全控制样式、保证跨浏览器一致性，又能保留原生文件选择的全部功能。

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