如何隐藏文件上传浏览按钮、优化交互样式并统一画布高度？

嘿，我来帮你搞定这两个问题！咱们一步一步来：

一、改造文件上传按钮：隐藏默认浏览按钮，保留可点击区域+悬停效果 #

默认的<input type="file">样式很难直接修改，所以我们可以用label标签关联它，把默认输入框隐藏，然后给label做自定义样式，既能保留可点击交互，还能完全控制外观。

实现步骤： #

1. 调整HTML结构，用label包裹input（或者用for属性关联，包裹写法更简洁）
2. 用CSS隐藏原生input，保留它的选择文件功能
3. 给label添加自定义样式，包括默认状态、悬停状态，以及合适的光标

代码示例：

<!-- 改造后的文件上传区域 -->
<div class="file-upload-container">
  <label class="file-upload-label">
    <span class="upload-text">点击选择多个文件</span>
    <input type="file" multiple class="hidden-file-input">
  </label>
  <!-- 可选：显示已选中的文件名 -->
  <div class="file-list" id="fileList"></div>
</div>

/* 隐藏原生input，保留功能 */
.hidden-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 自定义上传按钮容器样式 */
.file-upload-label {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
  cursor: pointer; /* 鼠标悬停显示手型光标 */
  transition: background-color 0.3s ease;
}

/* 悬停时的变色效果 */
.file-upload-label:hover {
  background-color: #e8f4f8;
  border-color: #66b3ff;
}

.upload-text {
  color: #333;
  font-size: 14px;
}

/* 可选：已选文件列表样式 */
.file-list {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

如果需要显示选中的文件名，可以加一点简单的JS（可选）：

const fileInput = document.querySelector('.hidden-file-input');
const fileList = document.getElementById('fileList');

fileInput.addEventListener('change', (e) => {
  fileList.innerHTML = '';
  Array.from(e.target.files).forEach(file => {
    const fileItem = document.createElement('div');
    fileItem.textContent = file.name;
    fileList.appendChild(fileItem);
  });
});

二、让两个绿色画布保持相同高度 #

CSS里实现等高布局最省心的方式是用Flexbox，兼容性好且写法简单，完全不需要手动计算高度。

实现步骤： #

1. 把两个画布放在同一个父容器里
2. 给父容器设置display: flex，默认就会让子元素高度自动拉伸对齐

代码示例：

<!-- 画布容器 -->
<div class="canvas-container">
  <canvas class="green-canvas" id="canvas1"></canvas>
  <canvas class="green-canvas" id="canvas2"></canvas>
</div>

/* 父容器用Flex布局，自动让子元素等高 */
.canvas-container {
  display: flex;
  gap: 20px; /* 两个画布之间的间距 */
  width: 100%; /* 可选：让容器占满父元素宽度 */
}

/* 画布样式 */
.green-canvas {
  flex: 1; /* 让两个画布平分父容器宽度，也可以设固定宽度 */
  background-color: #7ccd7c;
  border: 1px solid #55a555;
  /* 不需要手动设高度，Flex会自动让它们高度一致；如果要固定高度，给父容器设height即可 */
  /* height: 300px; */
}

哪怕画布是动态生成内容导致高度变化，Flexbox的默认align-items: stretch属性也会强制它们保持相同高度，完全不用额外处理~

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