[css]自定义input文件上传按钮样式

要自定义input文件上传按钮样式，可以隐藏原生的input文件按钮，然后创建一个自定义的按钮，并通过CSS进行样式设计。当用户点击自定义按钮时，触发隐藏的input文件上传按钮。

以下是实现这一功能的示例代码：

HTML:

<div class="file-upload-wrapper">
  <button type="button" class="upload-btn">选择文件</button>
  <input type="file" id="file-upload" class="file-upload" />
</div>

CSS:

.file-upload-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
 
.file-upload-wrapper .upload-btn {
  padding: 10px 20px;
  font-size: 16px;
  border: 2px solid #007bff;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
 
.file-upload-wrapper .upload-btn:hover {
  background-color: #0056b3;
}
 
.file-upload-wrapper input.file-upload {
  position: absolute;
  font-size: 100px;
  opacity: 0;
  right: 0;
  top: 0;
}

JavaScript (用于触发文件上传):

document.querySelector('.upload-btn').addEventListener('click', function() {
  document.querySelector('#file-upload').click();
});

在这个例子中，.upload-btn 是自定义的按钮，而 #file-upload 是隐藏的input文件上传按钮。当用户点击 .upload-btn 时，通过JavaScript的事件监听器，触发了 #file-upload 的点击事件，从而打开文件选择窗口。