HTML file 上傳控件美化：將「選擇文件」文字替換為自定義圖片樣式

原生 <input type="file"> 的痛點

瀏覽器默認渲染的文件上傳控件樣式固定、難看，且無法直接通過 CSS 修改「選擇文件」按鈕的文字或圖標。

核心技巧：隱藏原控件 + 標籤代理點擊

<style>
.file-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.file-wrapper input[type="file"] {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 100px; /* 放大點擊區域 */
  width: 100%; height: 100%;
}
.custom-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
  background-image: url('upload-icon.png');
  background-repeat: no-repeat;
  background-position: 8px center;
  padding-left: 32px;
}
</style>

<div class="file-wrapper">
  <span class="custom-btn">上傳圖片</span>
  <input type="file" name="myfiles" accept="image/*" />
</div>

關鍵點解析

1. opacity: 0 而非 display:none，保證控件仍可接收點擊事件。
2. font-size 放大 覆蓋整個自定義按鈕區域，解決點擊無響應問題。
3. accept="image/*" 限制文件類型，移動端可直接喚起相機/相冊。
4. IE7/8 需額外處理 filter: alpha(opacity=0)。

進階：顯示選中文件名

<script>
document.querySelector('.file-wrapper input').addEventListener('change', function(e) {
  const fileName = e.target.files[0]?.name || '未選擇文件';
  this.previousElementSibling.textContent = fileName;
});
</script>

此方案無需任何 JS 庫，純 CSS/HTML 實現，兼容所有主流瀏覽器（含移動端）。