修改 <input type="file" /> 元素的文字和样式比修改普通表单元素要复杂一些，因为浏览器出于安全和统一性的考虑，限制了对文件上传控件的直接样式化。

核心原因：

* 浏览器默认样式： 浏览器会为文件上传控件应用一套默认样式，以确保用户界面的统一性和可访问性。
* 安全限制： 允许开发者随意修改文件上传按钮的外观，可能会导致恶意网站伪装成合法的上传按钮，欺骗用户上传敏感文件。

因此，我们通常采用以下两种方法来“修改” <input type="file" /> 的文字和样式：

—

方法一：隐藏原生 <input type="file" /> 并使用自定义元素（最常见且推荐）

这是最灵活、最常用的方法。我们利用 CSS 隐藏原生的文件上传按钮，然后通过一个自定义的元素（例如 <label> 或一个 <div> 加上一个按钮）来模拟用户交互，并在用户选择文件后更新该自定义元素显示的信息。

步骤：

1. HTML 结构：
* 将 <input type="file" /> 隐藏起来。
* 使用一个 <label> 元素，并将其 for 属性指向隐藏的 <input type="file" />。<label> 元素可以包含你想要的文字和样式。
* 当用户点击 <label> 时，浏览器会自动触发与之关联的 <input type="file" />。
* (可选) 准备一个区域来显示用户选择的文件名。

html
<div class="file-upload-wrapper">
<!-- 隐藏原生 input -->
<input type="file" id="myFileInput" class="file-input-hidden">

<!-- 自定义显示的 label，用户点击它会触发 file input -->
<label for="myFileInput" class="custom-file-label">
<i class="fas fa-upload"></i> <!-- 例如，添加一个上传图标 -->
选择文件
</label>

<!-- (可选) 用于显示选择的文件名 -->
<span id="fileNameDisplay" class="file-name"></span>
</div>


2. CSS 样式：
* 隐藏原生 input：
css
.file-input-hidden {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}

* width: 0.1px; height: 0.1px;: 使其尺寸非常小。
* opacity: 0;: 使其透明。
* overflow: hidden;: 隐藏超出部分。
* position: absolute; z-index: -1;: 将其移出文档流，并且放置在其他元素下方，确保它不会遮挡其他内容。
* 样式化自定义 label：
css
.custom-file-label {
display: inline-block; /* 或者 block，取决于你的布局 */
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer; /* 鼠标悬停时显示手型光标 */
transition: background-color 0.3s ease;
margin-right: 10px; /* 如果后面有显示文件名的 span */
}

.custom-file-label:hover {
background-color: #0056b3;
}

.custom-file-label i { /* 如果使用了图标 */
margin-right: 8px;
}

* 样式化文件名显示区域（可选）：
css
.file-name {
font-style: italic;
color: #555;
}


3. JavaScript (显示文件名)：
* 监听 <input type="file" /> 的 change 事件。
* 当用户选择文件后，获取文件名并更新显示区域的内容。

javascript
const fileInput = document.getElementById('myFileInput');
const fileNameDisplay = document.getElementById('fileNameDisplay');

fileInput.addEventListener('change', function() {
if (this.files && this.files.length > 0) {
const fileName = this.files[0].name;
fileNameDisplay.textContent = `已选择: ${fileName}`;
// 你也可以根据需要，将文件名添加到其他地方，或进行其他操作
} else {
fileNameDisplay.textContent = ''; // 清空文件名
}
});


优点：

* 高度自定义： 可以完全控制按钮的文字、颜色、背景、边框、阴影、图标等所有样式。
* 跨浏览器兼容性好： 避免了直接样式化原生控件带来的兼容性问题。
* 用户体验好： 可以设计出更美观、更符合品牌风格的上传界面。

—

方法二：有限的样式化原生 <input type="file" /> (不推荐，局限性大)

某些浏览器允许对原生 <input type="file" /> 进行一些有限的样式化，但这通常效果不佳，并且兼容性非常差。强烈不推荐使用这种方法来创建复杂的样式。

可以尝试的 CSS 属性（但效果有限且不一致）：

* width, height
* background (有时会被忽略，尤其是在 Windows 上)
* color (通常只影响按钮上的文字，取决于浏览器)
* border, padding
* font-size, font-family

示例 (效果非常有限)：

html
<input type="file" class="limited-style-file-input">


css
.limited-style-file-input {
width: 200px;
height: 40px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 16px;
color: #333;
cursor: pointer;
/* 很多属性在这里会被忽略 */
}


为什么不推荐：

* 浏览器差异巨大： 在 Chrome、Firefox、Safari、Edge、IE (已淘汰) 等浏览器中，效果可能完全不同。
* 外观丑陋： 很难达到你想要的美观效果。
* 功能受限： 很多高级样式（如圆角、阴影、渐变、图标）根本无法应用。

—

总结

修改 <input type="file" /> 的文字和样式的最佳实践是：

1. 隐藏原生的 <input type="file" />。
2. 使用一个 <label> 元素（或其他可点击元素）来模拟文件选择按钮，并为其添加自定义文字和样式。
3. 利用 JavaScript 监听原生 <input> 的 change 事件，并在选择文件后更新页面上的相关信息（如显示文件名）。

这种方法提供了最大的灵活性，确保了良好的用户体验和跨浏览器兼容性。